Anglejs 마스크 전환 로딩의 간단한 구현

이 글은 주로angularjs 마스크 전환 로딩의 간단한 구현을 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요하신 분들은 참고하세요

머리말

: 많은 경우,angularjs가 페이지를 로드하면 '{{}}' 등이 표시되어 페이지 미적 측면에 문제가 발생합니다. 따라서 이때 페이지가 로드될 때 전환되는 마스크를 사용해야 합니다. 이를 수행하기 전에angularjs 인터셉터의 API 문서를 참조하고 클릭하여

angularjs 마스크 전환 로딩 구현 단계
를 볼 수 있습니다.

개발 환경:

angularjs1.2.6 jquery1.9, 주로 이러한 js 툴킷

은 ie8 이상 시스템과 호환 가능합니다. 저는 아무 문제 없이 테스트했습니다1. 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. 인터셉터를 사용자 정의

//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 tag

<loading></loading>

좋아요:

관련 추천:

AngularJS 애플리케이션 모듈화 사용에 대한 자세한 설명

Angular 개발 실습 서버사이드 렌더링_AngularJS

위 내용은 Anglejs 마스크 전환 로딩의 간단한 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!