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自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
javascript白色简洁计算器
May 04 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python图书管理系统
2020/04/05 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
初中校园之声广播稿
2014/01/15 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
论文评审意见
2015/06/05 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Hive导入csv文件示例
2022/06/25 数据库