javascript – Angular $location.state()vs history.pushState行为

我正在尝试构建一个概念验证单页面应用程序,它使用历史API来存储视图的状态,这样当用户使用浏览器的后退和前进按钮导航时,将显示之前的状态.

这个简单的例子是一系列页面链接和几个显示的值,以显示状态(没有双关语).

这一切都在功能plnkr

基本观点：

<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <h1>State Data: {{data.displayText}}</h1>
        <h2>Current Page: {{data.currentPage}}</h2>
        <a ng-click="goToPage(page)" ng-repeat="page in pages" class="page">{{page}}</a>
    </div>
</div>

应用程序/控制器：

var testApp = angular.module('testApp',['ngRoute'])
  .config(function($locationProvider) {
        $locationProvider.html5Mode(true);
  });

testApp.controller('testCtrl',['$scope','$location',function ($scope,$location) {

    // Hardcode some pages
    $scope.pages = [1,2,3,4,5,6,7,8,9];

   // Set initial data
    $scope.data = {
        currentPage: 1,displayText: "This is the initial state"
    };

    // Set initial data in state
    $location.state($scope.data);

    // Watch for location changes so we can apply state accordingly
    $scope.$on('$locationChangeSuccess',function (a,newUrl,oldUrl) {
        $scope.data = $location.state();
    });

    // Move between pages
    $scope.goToPage = function (page) {

        $scope.data.currentPage = page;
        $scope.data.displayText = "This is page " + page;

        $location.search("page",page);
        $location.state($scope.data);

        //history.pushState($scope.data,null,'/ThisPage?page=' + page);
    };
}]);

您会注意到注释的history.pushState()行.使用该行而不是上面的$location.search()和$location.state()行实际上可以正常工作和执行,但我希望使用正确的角度方式使其工作.

编辑：要清楚,我不是在问我是否应该采用角度方式.我在问这个有效角度的方法是什么.在$scope.goToPage()中对$location的两次调用不起作用,但是对history.pushState(注释行)的调用确实有效.我显然错过了如何用纯角度来实现这一点,这就是我需要帮助的东西.干杯!

解决方法

根据他们官方网站上的AngularJS文档,使用$location.search和state而不是history是完全没问题的.

https://docs.angularjs.org/api/ng/service/ $位置

如果您使用的是纯AngularJS,则始终建议您使用Angular方式

history.pushState不是Angular代码,它只是一种如何操作浏览器历史记录检查链接的更多细节

https://developer.mozilla.org/en-US/docs/Web/API/History_API

所以我总是希望你使用$location.search和$location.state而不是history.pushState