Simple implementation of angularjs mask transition loading

This article mainly introduces the simple implementation of angularjs mask transition loading. It is very good and has reference value. Friends who need it can refer to it

Foreword:
In many cases, when angularjs loads a page, it will display ‘{{}}’, etc., causing problems with the aesthetics of the page. So at this time we need to use the mask, which is the transition when the page is loaded. Before doing it, you can refer to the API document of the angularjs interceptor and click to view

angularjs mask transition loading implementation steps

Development environment:
angularjs1.2.6 jquery1.9, mainly these js toolkits
are compatible with ie8 and above I have tested the system and there is no problem

1. Add custom interceptor to $http service

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

2. Custom interceptor

//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. Customize angularjs mask component

//该遮罩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/imghwm/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. When witnessing the result

Add the following code to the page that needs to be loaded, and place it in the body tag

<loading></loading>

Like this:

Related recommendations:

Detailed explanation of the use of AngularJS application modularization

Angular development practice of server-side rendering_AngularJS

The above is the detailed content of Simple implementation of angularjs mask transition loading. For more information, please follow other related articles on the PHP Chinese website!