微客导航 » 文章资讯 » AngularJS使用拦截器实现的loading功能完整实例

AngularJS使用拦截器实现的loading功能完整实例

2024-02-23 16:48:03 144

本文实例讲述了AngularJS使用拦截器实现的loading功能。分享给大家供大家参考，具体如下：











.mask-loading.loading-icon{
-webkit-animation:rotate1slinearinfinite;
-o-animation:rotate1slinearinfinite;
animation:rotate1slinearinfinite;
position:absolute;
top:50%;
left:50%;
width:30px;
height:30px;
margin:-20px00-20px;
border-width:5px;
border-style:solid;
border-color:#37c3aa#37c3aa#fff#fff;
opacity:.9;
border-radius:20px;
}
@-webkit-keyframesrotate{
0%{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframesrotate{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.mask-loading{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:00;
z-index:9999;
}




varmyApp=angular.module('myApp',['ui.router','ngAnimate']);
myApp.config(["$stateProvider","$httpProvider",'$urlRouterProvider',function($stateProvider,$httpProvider,$urlRouterProvider){
$stateProvider
.state('a',{
url:'/a',
templateUrl:"loadpath/a.html",
controller:"aController"
})
.state('b',{
url:'/b',
templateUrl:"loadpath/b.html",
controller:"bController"
});
$urlRouterProvider.otherwise('/');
$httpProvider.interceptors.push('myInterceptor');
}]);
//loading
myApp.factory('myInterceptor',["$rootScope",function($rootScope){
vartimestampMarker={
request:function(config){
$rootScope.loading=true;
returnconfig;
},
response:function(response){
$rootScope.loading=false;
returnresponse;
}
};
returntimestampMarker;
}]);
myApp.controller('aController',function($scope){
$scope.page="a";
});
myApp.controller('bController',function($scope){
$scope.page="b";
});



index

gotoa.html

gotob.html

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

AngularJS使用拦截器实现的loading功能完整实例

index

热门推荐

随机推荐