简单实现angularjs遮罩过渡加载

最新推荐文章于 2024-09-11 07:20:01 发布

xiaotangaimama

最新推荐文章于 2024-09-11 07:20:01 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： angularjs遮罩 $http拦截器 angularjs loading

本文链接：https://blog.youkuaiyun.com/xiaotangaimama/article/details/79870897

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在AngularJS中实现页面加载时的遮罩效果，通过自定义HTTP拦截器和遮罩组件来提升用户体验。适用于AngularJS 1.2.6及jQuery 1.9环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：
很多情况下angularjs 加载页面时，会显示‘{{}}’ 等，带来页面美观性的问题。所以这个时候我们要用到遮罩，也就是页面加载时过渡.在做之前，可以先参考下angularjs 拦截器的API文档点击查看

angularjs遮罩过渡加载实现步骤

开发的环境：
angularjs1.2.6 jquery1.9，主要是这几个js工具包
可以兼容ie8及以上系统本人测试过无毛病

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遮罩组件

//该遮罩template是测试demo，如果觉得不好看，可以自己在网上找些好看的，修改template即可
apptag.directive('loading', function(){  
    return {  
        restrict: 'E',  
        transclude: true,  
        template: '<div ng-show="loading" class="loading" id="allDiv"  style="position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; background-color:#000; opacity: 0.5; z-index:99999;">'  
        +'<img alt="" src="img/loading.gif" style="vertical-align: middle;width:100px; height:100px; position: absolute; top:50%; left:50%; margin-top: -50px; margin-left:-50px;"/></div>',  
        link: function (scope, element, attr) {  
            scope.$watch('loading', function (val) {
                if (val){  
                    document.getElementById("allDiv").style.display = "block";  
                }else{  
                    document.getElementById("allDiv").style.display = 'none';  
                }  
            });  
        }  
    }  
});