angularJS loading 載入畫面

在請求網絡的時候，顯示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/