Poniższy kod odczytuje za pośrednictwem usługi i pokazuje na stronie internetowej listę obiektów „strony” dla określonej „kategorii strony” (ciągu). Korzystając z właściwości resolve obiekt w $ routeProvider.when (), mogę odłożyć aktualizację widoku, dopóki nowa wartość nie będzie gotowa.

Dwa pytania:

Pytając o nową listę stron, chcę pokazać ikonę ładowania. Jak mogę wykryć (w sposób niezawierający włamań) zdarzenie, gdy rozpoczyna się odczyt z serwera (a ikona ładowania powinna być wyświetlona)? Myślę, że mógłbym zrobić coś takiego jak $ ('. Pages-loading-icon'). Show () w usłudze, ale uważam, że jest zbyt zależny od gui zbytnio umieszczony w usłudze.

Gdy nowa wartość jest gotowa, chciałbym, żeby stary zanikł, a nowy się ściemniał. Jaki jest „kanciasty” sposób, aby to zrobić? Próbowałem to zrobić w kontrolerze za pomocą $ watch, ale powoduje to wyświetlenie nowej wartości na krótko przed rozpoczęciem zanikania.

Kod:

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: Ostatnie czytane strony są przechowywane w currentPages i ich kategorii w 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>