angularjs拦截器实现loading

最新推荐文章于 2024-05-10 09:48:13 发布

yzbben

最新推荐文章于 2024-05-10 09:48:13 发布

阅读量1.4k

点赞数

分类专栏： angularjs

angularjs 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的单页应用案例，包括如何配置UI路由、添加页面过渡动画以及通过$http拦截器显示加载指示器。该示例展示了如何设置不同状态及其对应的视图和控制器，并实现了页面加载时的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[javascript]view plaincopy 
   
print?
 <!DOCTYPE html>  
 lt;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">  
    <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>  
 lt;/html>  
 
  
 

  
 
 