简单实现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("allDiv").style.display = "block";  }else{  document.getElementById("allDiv").style.display = 'none';  }  });  }  }  
});

4.见证结果的时刻

在需要加载的页面添加下面代码，位置放在body标签里

<loading>loading>

如斯：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！