我正在尝试构建一个概念验证单页面应用程序,它使用历史API来存储视图的状态,这样当用户使用浏览器的后退和前进按钮导航时,将显示之前的状态.
这个简单的例子是一系列页面链接和几个显示的值,以显示状态(没有双关语).
基本观点:
<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