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 数组的for循环到底应该怎么写?
May 31 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JQuery触发事件例如click
Sep 11 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
JavaScript编写开发动态时钟
Jul 29 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php调用shell的方法
2014/11/05 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
Sea.JS知识总结
2016/05/05 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
学习jQuery中的noConflict()用法
2018/09/28 jQuery
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python实现Event回调机制的方法
2019/02/13 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python关于反射的实例代码分享
2020/02/20 Python
python的help函数如何使用
2020/06/11 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
学生会招新策划书
2014/02/14 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
文明单位创建材料
2014/12/24 职场文书
销售员岗位职责范本
2015/04/11 职场文书