簡單實作angularjs遮罩過渡加載

這篇文章主要介紹了簡單實作angularjs遮罩過渡加載，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

前言：
 很多情況下angularjs 載入頁面時，會顯示‘{{}}’ 等，帶來頁面美觀性的問題。所以這個時候我們要用到遮罩，也就是頁面載入時過渡.在做之前，可以先參考下angularjs 攔截器的API文檔點擊查看

angularjs遮罩過渡載入實作步驟

開發的環境：
angularjs1.2.6  jquery1.9，主要是這幾個js工具包
可以相容ie8以上系統本身測試過無毛病

1. $http服務新增自訂攔截器

var apptag=angular.module('apptag', ['ui.router']).config(function($sceProvider){
    $sceProvider.enabled(false);
});//添加http拦截器apptag.config(["$httpProvider", function ($httpProvider) {   
    $httpProvider.interceptors.push('httpInterceptor');  
}]);

2. 自訂攔截器

//loading  apptag.factory('httpInterceptor', ["$rootScope", function ($rootScope) {  
    //设置加载时httpProvider请求和返回的加载状态
    var httpInterceptor = {
        request: function (config) { 
            //start 开始加载
            $rootScope.loading = true;  
            return config;  
        },  
        response: function (response) { 　　　 　       //end 结束加载 
            $rootScope.loading = false;  
            return response;  
        }  
    };  
    return httpInterceptor;  
}]);

3.自訂angularjs遮罩元件

//该遮罩template是测试demo，如果觉得不好看，可以自己在网上找些好看的，修改template即可apptag.directive('loading', function(){  
    return {  
        restrict: 'E',  
        transclude: true,  
        template: &#39;<p ng-show="loading" class="loading" id="allp"  style="position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; background-color:#000; opacity: 0.5; z-index:99999;">&#39;  
        +&#39;<img src="/static/imghw/default1.png"  data-src="img/loading.gif"  class="lazy"  alt=""    style="max-width:90%"/></p>&#39;,  
        link: function (scope, element, attr) {  
            scope.$watch(&#39;loading&#39;, function (val) {
                if (val){  
                    document.getElementById("allp").style.display = "block";  
                }else{  
                    document.getElementById("allp").style.display = &#39;none&#39;;  
                }  
            });  
        }  
    }  
});

4.見證結果的時刻

在需要載入的頁面加入下面程式碼，位置放在body標籤裡

<loading></loading>

如斯：

相關推薦：

AngularJS應用模組化的使用詳解

Angular開發實踐之服務端渲染_AngularJS

以上是簡單實作angularjs遮罩過渡加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！