Javascript 如何在Angular JS中自定义页面URL

是否有任何选项可以在Angular JS中动态设置页面URL。我知道Angular JS通常被称为单页应用程序，在这里我们加载HTML页面视图，并通过bid值更改HTML中的数据

例如：假设我有一个页面www.mysite.com//myPage，在这里我更改myPage HTML文件中的值。我想根据页面中的内容更改浏览器中显示的URL

<div ng-app ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName"></input>
    <input type="submit" ng-click="login()" value="Login"></input>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>

function LoginController($scope) {
    $scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.login = function () {
        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
}

演示链接

现在，在单击“登录”按钮之前，URL可能类似于www.mysite.com//myPage，而在单击“登录”之后，页面URL必须更改为类似于www.mysite.com//myPageLoggedIN的内容

---

是否有任何方法可以通过angular JS路由或$location服务实现这一点

查看角度教程

正如@Jax所说，您可以配置$routeProvider来实现您想要的

编辑

使用ui路由器：

从代码中获取

$state.go('phone.detail', {marque: "Nokia"});

您可以在服务或工厂中注入$window，然后尝试$window.history.pushState和$window.history.replaceState方法，这两种方法分别允许您添加和修改历史记录条目

// pseudo
angular
    .module('myServiceModule', [])
    .service(['$window', function ($window) {
        return {
             changeState: function (page, title, relativeRoute) {
                 $window.history.pushState(page, title, relativeRoute);
             };
        }
     }
}]); 

---

是的，您可以使用您的意思如下：？我一直在使用$routeProvider进行路由，但可以找到任何方法自定义页面的URL。我的HTML页面保持不变，其中的内容会根据用户的单击而更改。假设我有手机网站和手机详细信息页面，当用户处于手机详细信息页面时，URL将是www.Phone.com/phoneDetail，这里我想根据用户打开的内容将URL更改为www.Phone.com/Nokia、www.Phone.com/Samsung。

// pseudo
angular
    .module('myServiceModule', [])
    .service(['$window', function ($window) {
        return {
             changeState: function (page, title, relativeRoute) {
                 $window.history.pushState(page, title, relativeRoute);
             };
        }
     }
}]);