前言：
很多情况下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: '<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;">' +'<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;"/></p>', link: function (scope, element, attr) { scope.$watch('loading', function (val) { if (val){ document.getelementbyid("allp").style.display = "block"; }else{ document.getelementbyid("allp").style.display = 'none'; } }); } } });
4.见证结果的时刻在需要加载的页面添加下面代码，位置放在body标签里
<loading></loading>
如斯：
相关推荐：
angularjs应用模块化的使用详解
angular开发实践之服务端渲染_angularjs
以上就是简单实现angularjs遮罩过渡加载的详细内容。