AngularJS, используя маршруты без обновлений на кнопку назад
я использую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', 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
без необходимости повторного вызова шаблонов. Любое руководство здесь?
ОБНОВЛЕНИЕ: я изменил это, чтобы включить лучшие практики, добавив$http
запрос наservices
уровень, а неcontroller
уровень. Я все еще сталкиваюсь с проблемой запуска запроса getState перед AJAX$http
завершено, таким образом, имея пустое состояние, и ничего не сделать$scope
.