El siguiente código lee a través de un servicio y muestra en la página web una lista de objetos de 'página' para una 'categoría de página' específica (cadena). Al usar la propiedad de objeto de resolución en $ routeProvider.when (), puedo posponer la actualización de la vista hasta que el nuevo valor esté listo.

Dos preguntas:

Al solicitar una nueva lista de páginas, quiero mostrar un icono de carga. ¿Cómo puedo detectar (de manera no intrincada) el evento cuando se inicia la lectura del servidor (y se debe mostrar el icono de carga)? Supongo que podría hacer algo como $ ('. Pages-loading-icon'). Show () en el servicio, pero me parece que es demasiado dependiente de la interfaz gráfica de usuario también colocada en el servicio.

Cuando el nuevo valor esté listo, me gustaría que lo viejo se desvanezca y lo nuevo se desvanezca. ¿Cuál es la forma "angular" de hacer esto? He intentado hacerlo en el controlador usando $ watch, pero eso hace que el nuevo valor se muestre poco antes de que comience el desvanecimiento.

El código:

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);
        }
    }
}

servicios.js: Las últimas páginas leídas se almacenan en currentPages y su categoría en 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>