angularjsマスクトランジションローディングの簡単な実装

この記事では、主に angularjs マスク トランジション ローディングの簡単な実装を紹介します。非常に優れており、必要な方は参考にしてください。

前書き: 多くの場合、angularjs がページを読み込むと、「{{}}」などが表示され、ページの美観に問題が発生します。したがって、現時点では、ページが読み込まれるときのトランジションであるマスクを使用する必要があります。これを行う前に、angularjs インターセプターの API ドキュメントを参照し、クリックして

angularjs マスク トランジションの読み込み実装手順を確認することができます。

開発環境:

angularjs1.2.6 jquery1.9、主にこれらの js ツールキットは問題なくテストできました
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 マスクコンポーネントをカスタマイズします

ロードする必要があるページに次のコードを追加します。 body タグ

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

こんな感じ:

関連する推奨事項:

AngularJS アプリケーションのモジュール化の使用方法の詳細な説明

Angular 開発の実践サーバーサイドレンダリング_AngularJS

以上がangularjsマスクトランジションローディングの簡単な実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。