简单实现angularjs遮罩过渡加载

这篇文章主要介绍了简单实现angularjs遮罩过渡加载，非常不错，具有参考借鉴价值，需要的朋友参考下吧

前言：  很多情况下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: '
'          +'
',          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标签里

登录后复制

如斯：

相关推荐：

AngularJS应用模块化的使用详解

Angular开发实践之服务端渲染_AngularJS

以上就是简单实现angularjs遮罩过渡加载的详细内容，更多请关注【创想鸟】其它相关文章！