如何在AngularJS中处理加载?

AMG*_*AMG 6 javascript loading angularjs

可以使用哪些模块/提示来处理AngularJS中的加载?基本上,如何在加载页面时包含加载图标(例如用户的帐户设置或最初加载页面时)?是否有标准程序或ng-模块?

PS.如果我的问题太模糊或不恰当,请纠正我.我认为它已经超越了大多数Angular初学者的思想.

Roh*_*han 6

这是迄今为止表示正在进行的一个或多个XHR请求的最简单方法,如果您使用的是ui-routing,它还会向您显示在XHR请求中提取的HTML文件.

http://chieffancypants.github.io/angular-loading-bar/

这是一个看起来像Youtube加载指示器一样的酒吧,它很容易风格化.

只需将库作为ng-module包含在内,就是这样.

angular.module('myApp', ['angular-loading-bar'])
Run Code Online (Sandbox Code Playgroud)

您可能想要禁用圆圈或条形本身(两者同时可能看起来有点太多).


Nic*_*del 5

我发现这个答案非常有用,Josh David Miller提供:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});
Run Code Online (Sandbox Code Playgroud)
<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>
Run Code Online (Sandbox Code Playgroud)

来源:https: //stackoverflow.com/a/15033322/4040107