angularJS loading 载入画面

Posted 2020-08-17 @old土哥

在请求网络的时候，显示loading画面

1. 使用http的interceptor，截断处理所有的http请求和响应，以及错误。在request的时候设置$rootScope.loading=True，在反馈的时候设置$rootScope.loading=False.

2. 设置遮罩div，ng-show=loading,即请求中显示遮罩，请求完毕不显示

细节：

interceptor

      $httpProvider.interceptors.push([‘$q‘,‘$rootScope‘,function($q,$rootScope){
            return {
                ‘request‘: function(config){
                    $rootScope.loading = true;
                    return $q.resolve(config);
                },
                ‘response‘: function(response){
                    $rootScope.loading = false;
                    return $q.resolve(response);
                },
                ‘requestError‘:function(rejection){
                    $rootScope.loading = false;
                    return $q.reject(rejection);
                },
                ‘responseError‘:function(rejection){
                    $rootScope.loading = false;
                    return $q.reject(rejection);
                }
            }
        }]);

html

<div class="flyover" ng-show="loading">
    <div class="mask"></div>
    <div class="alert alert-info">
        <strong>Loading Foo...</strong>
    </div>
</div>

css

/** mask **/
.flyover .mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: black;
    z-index: 1049;
}
.flyover .alert{
    left: 50%;
    top: 50%;
    position: fixed;
    z-index: 1050;
}

参考：http://tech.wonga.com/angular-http-loader/