当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS使用拦截器实现的loading功能完整实例

AngularJS使用拦截器实现的loading功能完整实例

2018年04月26日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网