Следующий код читает через службу и показывает на веб-странице список объектов "страницы" для определенной "категории страниц" (строка). Используя свойство объекта разрешения в $routeProvider.when(), я могу отложить обновление представления до тех пор, пока новое значение не будет готово.
Два вопроса:
-
При запросе нового списка страниц я хочу показать значок загрузки. Как я могу обнаружить (не хакерским способом) событие, когда начинается чтение с сервера (и значок загрузки)? Я предполагаю, что я мог бы сделать что-то вроде $('. Pages-loading-icon'). Show() в службе, но обнаружил, что слишком слишком зависим от gui, помещенный в службу.
-
Когда новое значение будет готово, я хотел бы, чтобы старый погас, и новый, чтобы исчезнуть. Что такое способ angular? Я попытался сделать это в контроллере с помощью $watch, но это приводит к тому, что новое значение будет отображаться незадолго до запуска fadeout.
Код:
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: Последние прочитанные страницы хранятся в currentPages и его категории в 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>
