為頁面添加Loading動畫引出angular ui router的事件

近期的項目中需要給頁面加載時增加一個Loading動畫，於是我在項目的rootController中新增了一個全局可用的基於angular material dialog的簡單loading動畫，如下：

ts:

$window["pcLoadingShow"] = function(){
    $mdDialog.show({
        templateUrl: "pages/common-components/pcLoading.html"
    });
}

$window["pcLoadingHide"] = function(){
    $mdDialog.hide();
}

template:

<div id="pcLoadingDialogContainer">
    <md-dialog id="loading_icon_container" style="min-height: 100px;">
        <md-dialog-content>
            <div id="loading_icon"></div>
        </md-dialog-content>
    </md-dialog>
</div>

界面中最里層div的背景是一個GIF動圖，除此之外，dialog默認的遮罩層是灰黑色並半透明，測試覺得並不能起到真正的作用，所以需要把默認的遮罩層修改掉，但又不能直接去css中替換其樣式。於是在最外層嵌套一層div，css如下：

#pcLoadingDialogContainer{
    width: 100%;
    height: 100%;
    background: #fff;
}

接下來美滋滋的去使用這個loading圖，我在頁面controller constructor的初始化方法中直接使用$window["pcLoadingShow"]()，接下來在調用頁面內容接口成功或者失敗后均$window["pcLoadingHide"]()。運行之后的效果是靜態頁面優先加載出來，隨后loading圖才展示，顯示不盡人意。因為項目中使用的是angular ui router，查詢相關資料后想到另一種解決方案：在路由觸發之前（靜態頁加載之前）就把loading圖show出來。具體如下：

一、首先需要了解angular ui router的幾個事件：

1.state change events 狀態改變事件(所有這些事件都是在$rootScope作用域觸發)

• $stateChangeStart - 當模板開始解析之前觸發

$rootScope.$on('$stateChangeStart',function(event, viewConfig){ });

• $stateChangeSuccess - 當模板解析完成后觸發

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ })

2.view load events 視圖加載事件

• $viewContentLoading - 當視圖開始加載，DOM渲染完成之前觸發，該事件將在$scope鏈上廣播此事件。

$scope.$on('$viewContentLoading', function(event, viewConfig){  });

• $viewContentLoaded - 當視圖加載完成，DOM渲染完成之后觸發，視圖所在的$scope發出該事件。

$scope.$on('$viewContentLoading',$scope.$on('$viewContentLoaded',function(event){  });

二、在rootController中使用$stateChangeStart事件，並在對應state加載之前引入loading圖即可，如下：

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
     if(toParams.moduleName==="該視圖對應的module name"){
          $window["pcLoadingShow"]();
     }
})

除此之外，感覺$viewContentLoading事件也可以實現，但是嘗試了沒有成功，希望哪位朋友可以講解下，后續會繼續完善angular ui router相關的內容。

相關鏈接：鏈接1，鏈接2，鏈接3