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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
require.js中的define函数详解
2017/07/10 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
实例讲解React 组件
2020/07/07 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
星球大战与Python之间的那些事
2016/01/07 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
委托公证书
2014/04/08 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
党支部评议意见
2015/06/02 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers