Я использую 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
без необходимости повторного вызова шаблонов. Какие-нибудь рекомендации здесь?
UPDATE: я изменил это, чтобы включить Best Practices, добавив запрос $http
на уровне services
вместо уровня controller
. Я все еще сталкиваюсь с проблемой запуска запроса getState до завершения AJAX $http
, имея при этом пустое состояние и ничего не отображая $scope
.