AngularJS使用拦截器实现的loading功能完整实例
程序员文章站
2022-03-20 23:00:04
本文实例讲述了angularjs使用拦截器实现的loading功能。分享给大家供大家参考，具体如下：
本文实例讲述了angularjs使用拦截器实现的loading功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="zh-cn" ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
<style type="text/css">
.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;
}
</style>
<script type="text/javascript" src="angular-ui-router.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript">
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";
});
</script>
</head>
<body>
<h1>index</h1>
<div id="mask-loading" class="mask-loading" ng-if="loading" style="background-color: rgba(0, 0, 0, 0.17);">
<div class="loading-icon"></div>
</div>
<div ui-view></div>
<a ui-sref="a">go to a.html</a>
<br/>
<a ui-sref="b">go to b.html</a>
</body>
</html>
更多关于angularjs相关内容感兴趣的读者可查看本站专题：《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。