本文實例講述了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>
新聞熱點
疑難解答
圖片精選
