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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
es5 类与es6中class的区别小结
Nov 09 Javascript
SSM VUE Axios详解
Oct 05 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
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python中如何使用insert函数
2020/01/09 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
总监职责范文
2013/11/09 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
电钳专业个人求职信
2014/01/04 职场文书
社区十八大感言
2014/01/19 职场文书
高二化学教学反思
2014/01/30 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android