AngularJS怎么使用拦截器实现loading功能-创新互联

小编给大家分享一下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