欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:35:24
本文实例讲述了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程序设计有所帮助。