Управление маршрутом и отключение кэширования

С помощью сервиса $route мы можем управлять текущим маршрутом. Сервис $route имеет несколько свойств и методов, позволяющих управлять маршрутом:

• current: возвращает объект, который содержит информацию о текущем маршруте

• reload(): перезагружает представление для текущего маршрута

• routes: возвращает коллекцию маршрутов, определенных через $routeProvider

Чтобы зафиксировать переход от одного маршрута к другому, мы можем обрабатывать события, определенные в сервисе $route:

• $routeChangeStart: событие срабатывает перед изменением маршрута

• $routeChangeSuccess: событие срабатывает после изменения маршрута

• $routeUpdate: событие срабатывает при обновлении маршрута

• $routeChangeError: срабатывает, если маршрут не может быть изменен

Как мы можем использовать данные возможности? В прошлых темах у нас было разграничение на два контроллера: QuestionController выводит все вопросы, а AnswerController выводит форму с добавлением вопроса и отправляет данные на определенный адрес. Но если после добавления данных мы переключимся обратно на список ответов, то мы увидим только те ответы, которые были раньше, даже если мы перезапишем файл json. Данные кэшируются, и браузер вместо повторной загрузки просто берет данные из кэша. Попробуем изменить данное поведение.

Для этого изменим код модуля приложения в файл app.js:

var questApp = angular.module('questApp', ["ngRoute"])
    .config(function($routeProvider){
        $routeProvider.when('/question',
        {
            templateUrl:'views/question.html',
            controller:'QuestionController'
        });
        $routeProvider.when('/answer',
        {
            templateUrl:'views/answer.html',
            controller:'AnswerController'
        });
        $routeProvider.otherwise({redirectTo: '/question'});
}).run(function($rootScope, $templateCache) {
	$rootScope.$on('$routeChangeStart', function(event, next, current) {
		if (typeof(current) !== 'undefined'){
			$templateCache.remove(current.templateUrl);
		}
	});
}); 

Метод run выполняет начальную инициализацию модуля. Кэширование шаблонов управляет сервис $templateCache, поэтому мы его передаем в качестве параметра. Кроме того, нам надо установать обработчик события $routeChangeStart. Его установка производится с помощью метода $rootScope.$on(). Использование $rootScope позволит применять обработчик при изменениях по всему модулю, вне зависимости от контроллера. В данном случае будет обрабатываться событие $routeChangeStart, возникающее до изменения маршрута.

Обработчик события может принимать три параметра: event (данные о событии), next (маршрут, на который осуществляется переход) и current (текущий маршрут, с которого осуществляется переход).

В самой функции обработчика удаляется кэширование для маршурта, на который осуществляется переход ($templateCache.remove(current.templateUrl);).

Данная конструкция удаляет кэширование для всех маршрутов, но у нас по сути пока 2 маршрута, и удалять кэширование надо только для маршрута, который отображает ответы на вопрос. То есть эффективнее было бы локализовать действие обработчика события $routeChangeStart.

Итак, уберем метод run из определения модуля:

var questApp = angular.module('questApp', ["ngRoute"])
    .config(function($routeProvider){
        $routeProvider.when('/question',
        {
            templateUrl:'views/question.html',
            controller:'QuestionController'
        });
        $routeProvider.when('/answer',
        {
            templateUrl:'views/answer.html',
            controller:'AnswerController'
        });
        $routeProvider.otherwise({redirectTo: '/question'});
});

И изменим контроллер AnswerController:

questApp.controller('AnswerController',
    function AnswerController($scope, $http, $location, $templateCache){
		
	$scope.$on('$routeChangeStart', function(event, next, current) {
		if (typeof(current) !== 'undefined'){
			$templateCache.remove(next.templateUrl);
			console.log(next);
			console.log(current);
		}
	});
    $scope.save = function (answer, answerForm){
        if(answerForm.$valid){
                
			$http.post("postAnswer.php", answer).then(function success() {
				$location.path("question");
			});
        }
    };
})

Обработка события на уровне контроллера практически ничем не отличается, за исключением использования объекта $scope вместо $routeScope.

Кроме того, здесь также устанавливается зависимость для сервиса $location. Данный сервис нужен нам для перехода по определенному маршруту. Переход осуществляется с помощью метода $location.path([маршрут])