快捷導航

AngularJS使用攔截器實現(xiàn)的loading功能完整實例

更新時間：2017年05月17日 09:58:34 作者：timelessmemoryli

這篇文章主要介紹了AngularJS使用攔截器實現(xiàn)的loading功能,結(jié)合完整實例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了AngularJS使用攔截器實現(xiàn)的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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: