Angularjs：如何在$ routeProvider使用“解析”时，显示加载图标？ [英] Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?

问题描述

以下code通过服务读取，并显示在网页上的特定页面分类页面对象（字符串）的列表。使用在$ routeProvider.when（）的决心对象属性，我能够推迟更新视图，直到新的值已准备就绪。

两个问题：

1. 在寻求一个新的页面列表，我要显示一个加载图标。如何检测（在非hackish的方式）的事件时（应显示与放入图标）从服务器启动的阅读？我想我可以做类似$（'。网页加载图标'）。在服务展（），但发现太依赖图形用户界面也放在服务。




2. 在新的值是准备好了，我想和新的褪色老淡出。什么是'角'的方式做到这一点？我曾尝试使用$手表做控制器，但会要求新​​的值是显示屏的淡出开始前不久。

在code：

app.js：

  $ routeProvider.when（'/：猫'，{templateUrl：'谐音/ view.html'，控制器：RouteCtrl，解析：RouteCtrl.resolve}）;
 

controllers.js：

 函数RouteCtrl（$范围，$ routeParams，页）{
        $ scope.params = $ routeParams;
        $ scope.pages =页;
    }RouteCtrl.resolve = {
    页：功能（$ routeParams，页）{
        如果（$ routeParams.hasOwnProperty（猫））{
            返回Pages.query（$ routeParams.cat）;
        }
    }
}
 

services.js：
最后一个页面读取存储在currentPages及其lastCat类别。

 厂（页数，函数（$资源，$ Q $超时）{
    返回{
        RES：$资源（'jsonService /猫=：猫'，{}，{
            查询：{方法：GET，则params：{猫：'猫'}，IsArray的：真正}
        }），
        lastCat：空，
        currentPages：空，
        查询：功能（猫）{
            VAR解析度= this.res;
            如果（猫！= this.lastCat）{
                变种推迟= $ q.defer（）;
                VAR P = res.query（{'猫'：猫}，函数（）{
                    deferred.resolve（P）;
                }）;
                this.lastCat =猫;
                this.currentPages = deferred.promise;
            }
            返回this.currentPages;
        }
    };
}）
 

view.html

 ＆LT; UL＆GT;
    ＆LT;李NG重复=，在页面上的页面＆GT;
        ＆所述; A HREF =＃{{params.cat}} / {{page.slug}}＆GT; {{page.title}}＆下; / A＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

不完全确定这是否会在code的工作，你有$资源整合。
但它可能是值得考虑的角事件： $ routeChangeStart 和 $ routeChangeSuccess

在HTML：

 ＆LT;跨度NG秀=isViewLoading＆GT;加载视图...＆LT; / SPAN＆GT;
 

在控制器（上面定义的HTML的范围内）：

  $ scope.isViewLoading = FALSE;
（$范围。在$（'$ routeChangeStart'，功能）{
  $ scope.isViewLoading = TRUE;
}）;
（$范围。在$（'$ routeChangeSuccess'，功能）{
  $ scope.isViewLoading = FALSE;
}）;
（$范围。在$（'$ routeChangeError'，功能）{
  $ scope.isViewLoading = FALSE;
}）;
 

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.

Two questions:

1. 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.

2. 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.

The code:

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: The last pages read is stored in currentPages and its category in 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>

解决方案

Not exactly sure whether this would work in your code as you have $resource integration. But it may be worth to look into angular events: $routeChangeStart and $routeChangeSuccess.

in html:

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

in controller (which defines the scope of the html above):

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

这篇关于Angularjs：如何在$ routeProvider使用“解析”时，显示加载图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！