javascript - Angularjs:在 $routeProvider 中使用 'resolve' 时如何显示加载图标？

Question

以下代码通过服务读取并在网页上显示特定“页面类别”(字符串)的“页面”对象列表。使用 $routeProvider.when() 中的 resolve 对象属性，我可以推迟更新 View ，直到新值准备就绪。

两个问题:

1. 当请求一个新的页面列表时，我想显示一个加载图标。当从服务器开始读取(并且应该显示加载图标)时，我如何检测(以非黑客方式)事件？我想我可以在服务中执行类似 $('.pages-loading-icon').show() 之类的操作，但我发现它太依赖于图形用户界面，也太放在服务中了。

2. 当新值准备就绪时，我希望旧值淡出而新值淡入。执行此操作的“Angular ”方法是什么？我曾尝试使用 $watch 在 Controller 中执行此操作，但这会导致在淡出开始前不久显示新值。

代码:

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>

Answer 1

不确定这是否适用于您的代码，因为您有 $resource 集成。但可能值得研究 Angular 事件:$routeChangeStart 和 $routeChangeSuccess。

在 html 中:

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

在 Controller 中(它定义了上面 html 的范围):

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