title: Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?
body: <p>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. </p>
  
  <p>Two questions:</p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>The code:</p>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve});
  </code></pre>
  
  <p><strong>controllers.js:</strong></p>
  
  <pre><code>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);
          }
      }
  }
  </code></pre>
  
  <p><strong>services.js:</strong>
  The last pages read is stored in currentPages and its category in lastCat.</p>
  
  <pre><code>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;
          }
      };
  })
  </code></pre>
  
  <p><strong>view.html</strong></p>
  
  <pre><code>&lt;ul &gt;
      &lt;li ng-repeat="page in pages"&gt;
          &lt;a href="#{{params.cat}}/{{page.slug}}"&gt;{{page.title}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>