我使用angularJS使用
AJAX构建一个简单的单页面应用程序,但是当用户使用本机后退按钮时,我遇到问题.
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',$routeParams) {
$scope.checkin_id = $routeParams.id;
console.log($routeParams.id);
});
我的主要index.html设置如下：
<body ng-app="untappd"> <div ng-view></div> </body>
从Feed(/ home)导航到登入页面(/ checkin / view /：id)这一点非常好,但是一旦用户在浏览器上点击了本机返回按钮,或者使用window.history.back(),控制器中的代码再次被调用,这使AJAX调用拉下用户的朋友提要.我应该使用ng-show而不是在这种用例中使用ng-view,并为我想要显示的每个内容创建单独的“页面”？我关心的是性能,但似乎我无法获取数据,以保持每个ng视图,而不必重新调用模板.任何指导在这里？
更新：通过在服务级别添加$http请求而不是控制器级别,我已经将其更改为包含最佳实践.在$http的AJAX完成之前,我仍然遇到正在触发的getState请求的问题,因此具有空状态,并且没有任何内容可以呈现$scope.
解决方法
是的,后退按钮和刷新按钮是一个真正的痛苦.你有两个选择：
>你保持简单,只需让你的状态被抓取到每个位置的变化.这可以使用户触发后退按钮点击或刷新,因为任何正常的位置更改.数据重新获取可以通过http缓存来缓解.
>您在客户端维护自己的状态,并在需要时进行恢复,可能使用SessionStorage来保持清洁.
我选择了后一个选项,这一切对我来说都很好.有关详细的代码示例,请参阅这些自回答的问题.
> 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
