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

【问题标题】：How to customize a page URL in Angular JS如何在 Angular JS 中自定义页面 URL
【发布时间】：2017-01-27 21:07:54
【问题描述】：

是否有任何选项可以在 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。

有什么方法可以使用 Angular JS 路由或 $location 服务来实现。

【问题讨论】：

是的，您可以使用$routeProvider
你的意思是这样的：consolelog.io/angularjs-change-path-without-reloading?
embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg

标签： javascript html angularjs

【解决方案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"});

【讨论】：

我一直在使用 $routeProvider 进行路由，但是可以找到任何方法来自定义页面的 URL。我的 HTML 页面保持不变，其中的内容会根据用户点击而变化。假设我有电话网站和电话详细信息页面，当用户在电话详细信息页面时，URL 将是 www.phone.com/#phoneDetail，这里我想将 URL 更改为 www.phone.com/#Nokia, www .phone.com/#Samsung 基于用户打开的内容。

【解决方案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);
             };
        }
     }
}]);

【讨论】：