Question

是否有任何选项可以在Angular JS中动态设置页面URL。我知道Angular JS通常被称为单页面应用程序，我们在其中加载HTML页面视图并通过绑定值来更改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.");
    };
}

演示链接.. https://jsfiddle.net/Lt7aP/4/

现在，在我点击登录按钮之前，URL可能就像这个www.mysite.com/#/myPage一样，点击登录后页面URL必须改为这样的东西www.mysite.com/#/ myPageLoggedIN。

有什么方法可以使用角度JS路由或$ location服务来实现这一点。

Answer 1

查看角度教程。

https://docs.angularjs.org/tutorial/step_09

正如@Jax所说，你可以配置$ routeProvider来实现你想要的目标。

修改

使用ui路由器： https://github.com/angular-ui/ui-router/wiki/URL-routing

$stateProvider .state('phone.detail', { url: "/phone/:marque", templateUrl: 'phone.detail.html', controller: function ($stateParams) { // If we got here from a url of /phone/Nokia expect($stateParams).toBe({marque: "Nokia"}); } })

加入代码

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

Answer 2

您可以在服务或工厂中注入$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);
             };
        }
     }
}]);

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

2 个答案: