Einfache Implementierung des Ladens von AngularJS-Maskenübergängen

Dieser Artikel stellt hauptsächlich die einfache Implementierung des Ladens von AngularJS-Masken vor. Er ist sehr gut und hat Referenzwert.

Vorwort:
Wenn AngularJS eine Seite lädt, wird in vielen Fällen „{{}}“ usw. angezeigt, was zu Problemen mit der Ästhetik der Seite führt. Zu diesem Zeitpunkt müssen wir also die Maske verwenden, die den Übergang darstellt, wenn die Seite geladen wird. Bevor Sie dies tun, können Sie auf das API-Dokument des AngularJS-Interceptors verweisen und klicken, um

AngularJS anzuzeigen Implementierungsschritte zum Laden des Maskenübergangs

Entwicklungsumgebung:
AngularJS1.2.6 JQuery1.9, hauptsächlich sind diese JS-Toolkits
mit IE8 kompatibel und oben habe ich das System getestet und es gibt kein Problem

1. Fügen Sie einen benutzerdefinierten Interceptor zum $http-Dienst hinzu

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

2. Passen Sie den Interceptor an

//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. Passen Sie die AngularJS-Maskenkomponente an

//该遮罩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;;  
                }  
            });  
        }  
    }  
});

4. Der Moment, um das Ergebnis zu sehen

Fügen Sie den folgenden Code zur Seite hinzu, die geladen werden muss, und platzieren Sie ihn im Textkörper Tag

<loading></loading>

wie Sri Lanka:

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung der AngularJS-Anwendungsmodularisierung

Angular-Entwicklungspraxisdienste Side-Rendering_AngularJS

Das obige ist der detaillierte Inhalt vonEinfache Implementierung des Ladens von AngularJS-Maskenübergängen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!