如果我们知道DRY的概念，那么所有的答案都是复杂的，或者需要在每个请求上设置一些变量，这是非常错误的做法。这里是一个简单的拦截器的例子，当ajax启动时，我将鼠标设置为等待，当ajax结束时设置为自动。

$httpProvider.interceptors.push(function($document) {
    return {
     'request': function(config) {
         // here ajax start
         // here we can for example add some class or show somethin
         $document.find("body").css("cursor","wait");

         return config;
      },

      'response': function(response) {
         // here ajax ends
         //here we should remove classes added on request start

         $document.find("body").css("cursor","auto");

         return response;
      }
    };
  });

代码必须添加到应用程序配置app.config中。我展示了如何改变鼠标加载状态，但在那里，它是可以显示/隐藏任何加载器内容，或添加，删除一些css类显示加载器。

拦截器将在每次ajax调用上运行，因此不需要创建特殊的布尔变量($scope. js)。加载=true/false等)在每个HTTP调用。

对于页面加载和模态，最简单的方法是使用ng-show指令并使用一个作用域数据变量。喜欢的东西:

ng-show="angular.isUndefined(scope.data.someObject)".

在这里，当someObject未定义时，旋转器将显示。一旦服务返回数据并填充someObject，微调器将返回其隐藏状态。

如果你正在使用ngResource，对象的$resolved属性对加载器很有用:

对于资源，如下所示:

var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})

你可以将加载器链接到资源对象的$resolved属性:

<div ng-hide="user.$resolved">Loading ...</div>

这真的取决于你的特定用例，但一个简单的方法是遵循这样的模式:

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

显示不同url更改之间加载的另一个解决方案是:

$rootScope.$on('$locationChangeStart', function() {
  $scope.loading++;
});

$rootScope.$on('$locationChangeSuccess', function() {
  $timeout(function() {
    $scope.loading--;
  }, 300);
});

然后在标记中用ng-show="loading"切换旋转器。

如果你想在ajax请求中显示它，只需添加$scope。当请求开始和结束时加载++，添加$scope.loading——。

这是我的解决方案，我觉得比其他贴在这里的要容易得多。虽然不知道它有多“漂亮”，但它解决了我所有的问题

我有一个css样式叫做loading

.loading { display: none; }

加载div的html可以是任何东西，但我使用了一些FontAwesome图标和旋转方法:

<div style="text-align:center" ng-class="{ 'loading': !loading }">
    <br />
    <h1><i class="fa fa-refresh fa-spin"></i> Loading data</h1>
</div>

在你想要隐藏的元素上，你只需这样写:

<something ng-class="{ 'loading': loading }" class="loading"></something>

在函数中，我把这个设为load。

(function (angular) {
    function MainController($scope) {
        $scope.loading = true

我使用的是SignalR，所以在hubProxy.client.allLocks函数(当它完成了通过锁)，我只是把

 $scope.loading = false
 $scope.$apply();

当页面加载时，这也隐藏了{{someField}}，因为我在load上设置了加载类，AngularJS随后删除了它。