AngularJS，使用后退按钮上没有刷新的路由 [英] AngularJS, using routes without refreshes on back button
问题描述
我正在使用angularJS使用AJAX构建简单的单页应用程序，但是当用户使用本机的后退按钮时，我遇到了一个问题.
I'm using angularJS to build a simple single page application using AJAX, but I'm running into a problem when users use the native back button.
angular.module('myApp', ['ionic', 'myApp.controllers', myApp.services])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'templates/feed.html',
controller: 'MenuCtrl',
reloadOnSearch: false
});
$routeProvider.when('/checkin/view/:id', {
templateUrl: 'templates/checkin.html',
controller: 'MenuCtrl'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true)
})
更新:根据反馈和建议，将$ http从控件中移出
和我的services.js文件:
angular.module('myApp.services', [])
.factory('FeedService', ['$http', function($http){
var state = {};
var loadFeed = function(){
$http({
method: 'GET',
url: 'http://api.example',
}).success(function(data){
// With the data succesfully returned, call our callback
state = data.response;
console.log(data);
}).error(function(){
alert("error");
});
};
loadFeed();
return {
getState: function(scope){
return state;
}
};
}])
和我的controller.js文件:
angular.module('myApp.controllers', [])
.controller('MenuCtrl', function($scope, $http, $location, FeedService) {
// feedback per second answer
$scope.items = FeedService.getState();
})
.controller('CheckinCtrl', function($scope, $routeParams) {
$scope.checkin_id = $routeParams.id;
console.log($routeParams.id);
});
我的主要index.html设置如下:
<body ng-app="untappd">
<div ng-view></div>
</body>
从提要(/home)导航到检入页面(/checkin/view/:id)时，此方法非常有用，但是，一旦用户在浏览器上单击本机后退按钮或使用window.history.back()，则controller中的代码将再次调用，这使得AJAX调用可以拉低用户的朋友供稿.我是否应该在此用例中使用ng-show而不是使用ng-view，并为要显示的每个内容创建单独的页面"?我担心性能，但似乎无法获取数据而无法在每个ng-view中保留它们，而不必重新调用模板.这里有什么指导吗?
This works great from navigation from a feed (/home), to a check-in page (/checkin/view/:id) but, once the user hits the native back button on the browser or using window.history.back(), code in the controller is called again, which makes the AJAX call to pull down the user's friend feed. Should I be using ng-show instead of using ng-view for this use case, and create individual "pages" for each content I want to show? I was concerned with the performance, but it appears that I can't get data to persist in each ng-view without it having to re-call the templates. Any guidance here?
更新:通过将$http请求添加到services级别而不是controller级别，我已对此进行了更改以纳入最佳实践.在$http的AJAX完成之前，我仍然遇到了触发getState请求的问题，因此状态为空，没有任何内容可以呈现$scope.
UPDATE: I have changed this to incorporate the Best Practices, by adding the $http request at the services level, instead of the controller level. I still run in to the issue of the getState request being fired, before the the AJAX of the $http is complete, thus having an empty state, and nothing to render the $scope.
推荐答案
是的，后退按钮和刷新按钮确实很麻烦.您有两种选择:
Yep, the Back button and the the Refresh button are a real pain. You have two choices:
-
您可以使事情保持简单，只允许在每次位置更改时获取您的状态.这会将用户触发的后退按钮单击或刷新视为任何常规位置更改.可以通过http缓存减轻数据的重新获取.
You keep things simple and just allow your state to be fetched for each location change. This treats a user triggered back button click or a refresh as any normal location change. Data re-fetching can be mitigated by http caching.
您可以在客户端上维护自己的状态，并在需要时进行恢复，可以使用SessionStorage保持状态整洁.
You maintain your own state on the client and restore it when required, possibly using SessionStorage to keep things clean.
我选择了后者，对我来说一切都很好.有关详细的代码示例，请参见这些自我解答的问题.
I chose the latter option and it all works just fine for me. See these self answered questions for detailed code examples.
- How do I get the Back Button to work with an AngularJS ui-router state machine?
- How do I handle page refreshing with an AngularJS Single Page Application
这篇关于AngularJS，使用后退按钮上没有刷新的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
