Angularjs loading interceptor, request, jump page and other loading effects

Personal summary

Foreword: This weekend, I have nothing to do and looked at the interceptor. I found that not only is the interception of http requests, but also a lot of fun things can be made. Today, I will write a loading case. When requesting http or jumping to the rendering page, there will be A certain waiting time may be one or two seconds, or it may be ten seconds. During the waiting process, the user does not know, so we must give the user an intuitive waiting effect and let the user know!

Steps (documents that need to be imported)

Step 1: Introduce bootstrap.css
Step 2: Introduce jquery library
Step 3: Introduce angular.js
Step 4: Introduce angular-ui-router.js
Step 5: Introduce angular-animate.js

Look at the code below (just copy it directly to see the effect!)

<!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">
        <link rel="stylesheet" href="../../angularjs/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <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>
      </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>
        <script src="../../angularjs/jquery-1.12.4.js"></script>
        <script src="../../angularjs/angular-1.5.8/angular.min.js"></script>
        <script type="text/javascript" src="./angular-animate.js"></script>
        <script type="text/javascript" src="./angular-ui-router.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: "./a.html",
                  controller: "aController"
              })
              .state('b', {
                  url: '/b',
                  templateUrl: "./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;  // loading特效容器为true 显示
                      return config;
                  },
                  response: function (response) {   // 请求后或跳转后或渲染后
                    setTimeout(function(){//由于并没有调接口,所以体现不出来时间差距,为了体现有时间差,这里用到了定时器,
                        $rootScope.$apply(function(){  //重新脏检查
                            $rootScope.loading = false;   
                        });
                    },2000);
                      return response;
                  }
              };
              return timestampMarker;
          }]);
     
          myApp.controller('aController', function($scope) {
            $scope.page = "a";
          });
     
          myApp.controller('bController', function($scope) {
            $scope.page = "b";
          });
        </script>
      </body>
    </html>

Angularjs loading interceptor, request, jump page and other loading effects

Guess you like