小编给大家分享一下AngularJS怎么使用拦截器实现loading功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联专业为企业提供源城网站建设、源城做网站、源城网站设计、源城网站制作等企业网站建设、网页设计与制作、源城企业网站模板建站服务，十年源城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
具体如下：
.mask-loading .loading-icon {
-webkit-animation: rotate 1s linear infinite;
-o-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -20px 0 0 -20px;
border-width: 5px;
border-style: solid;
border-color: #37c3aa #37c3aa #fff #fff;
opacity: .9;
border-radius: 20px;
}
@-webkit-keyframes rotate{
0% {-webkit-transform:rotate(0)}
100% {-webkit-transform:rotate(360deg)}
}
@keyframes rotate{
0% {transform:rotate(0)}
100% {transform:rotate(360deg)}
}
.mask-loading {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:0 0;
z-index:9999;
}
var myApp = 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) {
var timestampMarker = {
request: function (config) {
$rootScope.loading = true;
return config;
},
response: function (response) {
$rootScope.loading = false;
return response;
}
};
return timestampMarker;
}]);
myApp.controller('aController', function($scope) {
$scope.page = "a";
});
myApp.controller('bController', function($scope) {
$scope.page = "b";
});
index
