如何在 AngularJS 中处理加载

How to handle loading in AngularJS?

本文关键字：处理 加载 AngularJS      更新时间：2023-09-26
哪些

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

附言。如果我的问题太模糊或不合适，请纠正我。我确实认为它已经跨越了大多数 Angular 初学者的脑海。

这是迄今为止指示一个或多个正在进行的 XHR 请求的最简单方法，如果您使用的是 ui-route 风格，它还会显示在 XHR 请求中获取的 HTML 文件。

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

这是一个看起来与 Youtube 加载指示器相同的栏，并且很容易设置样式。

只需将库作为ng模块包含即可。

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

您可能希望禁用圆圈或条形图本身（两者同时可能看起来有点太多）。

我发现这个答案非常有帮助，由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

之前也回答过类似的问题......如果您不想自己实现它，下面是一些链接。

角度微调器

或角度假微调器

另请阅读此博客，其中详细介绍了微调器如何与 Angularjs 一起工作

如果你想自己实现它...然后 

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

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

相关文章：