Angular 怎么在加载中加入 Loading 提示框？

[coolicer]

现在有一个差不多做好的项目，由于之前没有考虑外网情况，如果当网络慢的时候加载会慢（就是切换模块时或者叫路由？）。现在要我加一个Loading，目前我的想法是在一个controller定义一些监听事件，获取数据前触发从而显示loading，加载完之后再触发隐藏loading。但是这样不就是每个页面都要加上了，有没有其他好方法。本人ng第一战，支持一下我吧。

[coolicer]

angular.module('APP', [
'ngRoute',
...
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'});
when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'});
$locationProvider.hashPrefix('!');
}).run(function(){
//run block
});
换个问法，如何在这些view切换中加入loading。

[dingdong]

<div ng-view>loading...</div>

[ijse]

ng加载完之前controller执行不了。

可以页面默认显示loading ， 然后加载完执行controller时关掉

[coolicer]

@dingdong 现在那些view就是在ng-view中切换，要加哪里啊。不懂

[fansgentle]

这是我的：

html:
<img ngs-butterbar src="{% static 'ico/loading.gif' %}">

directive.js:
directives.directive('ngsButterbar', ['$rootScope',
function ($rootScope) {
return {
link: function (scope, element) { //attrs

element.hide();

$rootScope.$on('$routeChangeStart', function () {
element.show();
$('div[ng-view]').css('opacity', '0.5');
});

$rootScope.$on('$routeChangeSuccess', function () {
element.hide();
$('div[ng-view]').css('opacity', '1');
});
}
};
}]
);

具体参考 《用AngularJS开发下一代Web应用》 第 84 页

[dingdong]

@coolicer 在ng-view的tag中间啊，ng-view会把tag中的内容替换掉的，没加载完之前会显示tag中的内容，可以试试，不确定一定能解决你的问题

[coolicer]

@fansgentle
是否routeChangeStart，routeChangeSuccess完了之后才执行link里面的操作。你这个方法看起来不错

[coolicer]

@dingdong 也有道理，我到时候试试。

[coolicer]

@dingdong 我试了一下，不知道是不是速度太快，看不到ng-view的内容

[whuhacker]

/**
* Loading Indicator
*
* @author Maikel Daloo
* @date 12th March 2013
*
* Creates a new module and intercepts all ajax requests.
* Every time a request is sent, we display the loading message and increment
* the enable_counter variable. Then when requests complete (whether success or error)
* we increment the disable_counter variable and we only hide the loading message
* when the enable/disable counters are equal.
*
* @example
* All that is required to get this working is to inject this module into your main
* module. E.g.
* var app = angular.module('my-app', ['LoadingIndicator']);
* Then the script will look for the element specified in the LoadingIndicatorHandler object
* and show/hide it.
*/
var module = angular.module('LoadingIndicator', []);

module.config(['$httpProvider', function($httpProvider) {
var interceptor = ['$q', 'LoadingIndicatorHandler', function($q, LoadingIndicatorHandler) {
return function(promise) {
LoadingIndicatorHandler.enable();

return promise.then(
function( response ) {
LoadingIndicatorHandler.disable();

return response;
},
function( response ) {
LoadingIndicatorHandler.disable();

// Reject the reponse so that angular isn't waiting for a response.
return $q.reject( response );
}
);
};
}];

$httpProvider.responseInterceptors.push(interceptor);
}]);

/**
* LoadingIndicatorHandler object to show a loading animation while we load the next page or wait
* for a request to finish.
*/
module.factory('LoadingIndicatorHandler', function()
{
// The element we want to show/hide.
var $element = $('#loading-indicator');

return {
// Counters to keep track of how many requests are sent and to know
// when to hide the loading element.
enable_count: 0,
disable_count: 0,

/**
* Fade the blocker in to block the screen.
*
* @return {void}
*/
enable: function() {
this.enable_count++;

if ( $element.length ) $element.show();
},

/**
* Fade the blocker out to unblock the screen.
*
* @return {void}
*/
disable: function() {
this.disable_count++;

if ( this.enable_count == this.disable_count ) {
if ( $element.length ) $element.hide();
}
}
}
});

[atian25]

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
display: none;
}

#splash-page.ng-cloak /*<-- This has higher specificity so it can display a splash screen*/
{
display: block;
}