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 设置如下:
My main index.html is setup like this:
<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?
更新:我已将其更改为包含最佳实践，方法是在 services 级别添加 $http 请求，而不是 controller 级别.我仍然遇到了 getState 请求被触发的问题，在 $http 的 AJAX 完成之前，因此有一个空状态，并且没有任何东西可以呈现 $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.
这篇关于AngularJS，在后退按钮上使用没有刷新的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
