angularJS loading 載入畫面

標籤：遮罩   pre   config   loading   ret   scope   loader   black   com   

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

angularJS loading 載入畫面