Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?

Question

The following code reads via a service and shows on the web page a list of 'page' objects for a specific 'page category' (string). Using the resolve object property in $routeProvider.when(), I am able to postpone updating the view until the new value is ready.

Two questions:

1. When asking for a new page list, I want to show a loading-icon. How can I detect (in a non-hackish way) the event when the reading from server starts (and the loading-icon should be displayed)? I guess I could do something like $('.pages-loading-icon').show() in the service, but find that to be too gui dependent too placed in the service.

2. When the new value is ready, I would like the old to fade out and the new to fade in. What is the 'angular' way to do this? I have tried to do it in the controller using $watch, but that causes the new value to be display shortly before the fadeout starts.

The code:

app.js:

$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve}); 

controllers.js:

function RouteCtrl($scope, $routeParams, pages) {         $scope.params = $routeParams;         $scope.pages = pages;     }  RouteCtrl.resolve={     pages: function($routeParams, Pages){         if($routeParams.hasOwnProperty('cat')){             return Pages.query($routeParams.cat);         }     } } 

services.js: The last pages read is stored in currentPages and its category in lastCat.

factory('Pages', function($resource, $q, $timeout){     return {         res: $resource('jsonService/cat=:cat', {}, {             query: {method:'GET', params:{cat:'cat'}, isArray:true}         }),         lastCat: null,         currentPages: null,         query: function(cat) {             var res = this.res;             if(cat != this.lastCat){                 var deferred = $q.defer();                 var p = res.query({'cat':cat}, function(){                     deferred.resolve(p);                 });                 this.lastCat = cat;                 this.currentPages = deferred.promise;             }             return this.currentPages;         }     }; }) 

view.html

<ul >     <li ng-repeat="page in pages">         <a href="#{{params.cat}}/{{page.slug}}">{{page.title}}</a>     </li> </ul> 

Answer 1

Not exactly sure whether this would work in your code as you have $resource integration. But it may be worth to look into angular events: $routeChangeStart and $routeChangeSuccess.

in html:

<span ng-show="isViewLoading"> loading the view... </span> 

in controller (which defines the scope of the html above):

$scope.isViewLoading = false; $scope.$on('$routeChangeStart', function() {   $scope.isViewLoading = true; }); $scope.$on('$routeChangeSuccess', function() {   $scope.isViewLoading = false; }); $scope.$on('$routeChangeError', function() {   $scope.isViewLoading = false; });