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


Posted in Javascript onMay 17, 2017

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

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
bootstrap轮播图示例代码分享
May 17 #Javascript
bootstrap警告框示例代码分享
May 17 #Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
You might like
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PDO实现学生管理系统
2020/03/21 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python 自动重连wifi windows的方法
2018/12/18 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
基于python实现雪花算法过程详解
2019/11/16 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
关于赌博的检讨书
2014/01/08 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
参加招聘会后的感想
2015/08/10 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
React四级菜单的实现
2022/04/08 Javascript