下面是AngularJS当前使用的咒语:

angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here
            //alert('start spinner');
            $('#mydiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
// register the interceptor as a service, intercepts ALL angular ajax http calls
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                // do something on success
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return $q.reject(response);
            });
        };
    });

//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
//.......

这里是它的其余部分(HTML / CSS)....使用

$('#mydiv').show(); 
$('#mydiv').hide(); 

来切换它。注意:以上是在post开头的angular模块中使用的

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

你也可以尝试这样做:

创建指令:

myApp.directive('loader', function () {
    return {
        restrict: 'A',
        scope: {cond: '=loader'},
        template: '<span ng-if="isLoading()" class="soft"><span class="fa fa-refresh fa-spin"></span></span>',
        link: function (scope) {
            scope.isLoading = function() {
                var ret = scope.cond === true || (
                        scope.cond &&
                        scope.cond.$$state &&
                        angular.isDefined(scope.cond.$$state.status) &&
                        scope.cond.$$state.status === 0
                    );
                return ret;
            }
        }
    };
}); 

然后向mainCtrl添加如下内容

    // Return TRUE if some request is LOADING, else return FALSE
    $scope.isLoading = function() {
        return $http.pendingRequests.length > 0;
    };

HTML可以是这样的:

<div class="buttons loader">
    <span class="icon" loader="isLoading()"></span>
</div>

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

对于资源，如下所示:

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

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

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

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

我有一个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随后删除了它。

这对我来说很管用:

HTML:

  <div id="loader" class="ng-hide" ng-show="req.$$state.pending">
    <img class="ajax-loader" 
         width="200" 
         height="200" 
         src="/images/spinner.gif" />
  </div>

角:

  $scope.req = $http.get("/admin/view/"+id).success(function(data) {          
      $scope.data = data;
  });

当$http返回的承诺是未决的，ng-show将评估它是“真实的”。一旦承诺被解决，这将自动更新…这正是我们想要的。

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

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

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