Implémentation simple du chargement de transition de masque AngularJS

Cet article présente principalement l'implémentation simple du chargement de transition de masque angulairejs. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Avant-propos : Dans de nombreux cas, lorsque angulairejs charge une page, il affichera « {{}} », etc., provoquant des problèmes avec l'esthétique de la page. Nous devons donc à ce moment utiliser le masque, qui est la transition lorsque la page est chargée. Avant de le faire, vous pouvez vous référer au document API de l'intercepteur angulaire js et cliquer pour afficher

angularjs. étapes de mise en œuvre du chargement de la transition du masque

Environnement de développement : angularjs1.2.6 jquery1.9, principalement ces boîtes à outils js
sont compatibles avec ie8 et surtout j'ai testé le système et il n'y a aucun problème

1 Ajoutez un intercepteur personnalisé au service $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 Personnalisez l'intercepteur

<.>3. Personnalisez le composant du masque Angularjs

//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;  
}]);

4. Le moment d'assister au résultat

//该遮罩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 alt="" src="img/loading.gif"   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;;  
                }  
            });  
        }  
    }  
});

Ajoutez le code suivant à la page qui doit être chargée et placez-le dans le corps. tag

comme le Sri Lanka :

<loading></loading>

Recommandations associées :

Explication détaillée de l'utilisation de la modularisation de l'application AngularJS

Services de pratique de développement angulaire Side Rendering_AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!