Question

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

聚苯乙烯。如果我的问题太模糊或不恰当，请纠正我。我确实认为它已经超越了大多数Angular初学者的思想。

Answer 1

到目前为止，这是指示正在进行的一个或多个XHR请求的最简单方法，如果您使用的是ui-routing，它还会向您显示在XHR请求中提取的HTML文件。

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

这是一个与Youtube加载指示器看起来相同的条形图，并且它很容易设计。

只需将库包含为ng-module，就是这样。

angular.module('myApp', ['angular-loading-bar'])

你可能想要禁用圆圈或条形本身（两者同时可能看起来有点太多了。）

Answer 2

我发现这个答案非常有用，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;
  });
});

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

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

Answer 3

之前也回答了类似的问题....如果您不想自己实施，下面是几个链接。

angular-spinner或angular-sham-spinner

还阅读了这个BLOG，详细说明了微调器如何与angularjs一起使用

如果你想自己实现它......那么

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

我没有测试过代码，但指令不会比这更复杂......

如何在AngularJS中处理加载？

3 个答案: