文档章节

配合angularjs中interceptor一劳永逸的加载$ionicloading的方法

邪气小生
 邪气小生
发布于 2016/02/22 20:46
字数 609
阅读 4394
收藏 6

在我们日常的项目开发中,每当页面需要和服务端存在交互的时候,为了界面的友好,我们都会在界面中给个loading的加载图标,当从服务端获取到数据或者已经把本地数据送到服务端并且得到相应的回应的时候我们就会隐藏刚刚的加载图标。

但是之前我们通常的做法都是在每一页面对应的controller中注入$ionicLoading,当发送请求的时候调用$ionicLoading.show();当完成与服务端的交互的时候就将loading隐藏掉,调用$ionicLoading.hide()方法,但是这样真的很麻烦,代码的重复度太高了,几乎每个页面都会不停的重复的写着这两行代码,所以这里我找到了一个一劳永逸的方法免去大家以后每个页面的loading的编写

因为最近项目比较忙,时间不多,这里 就不做过多介绍,直接上方法:

方法一:利用广播(因为拦截器中不能够注入$ionicLoading)

代码如下:

var app = angular.module('ionicApp', ['ionic'])

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

app.run(function($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: 'foo'})
  })

  $rootScope.$on('loading:hide', function() {
    $ionicLoading.hide()
  })
})

app.controller('MainCtrl', function($http, $ionicLoading) {
  var _this = this

  $http.jsonp('http://api.openbeerdatabase.com/v1/breweries.json?callback=JSON_CALLBACK').then(function(result) {
    _this.breweries = result.data.breweries
  })
})

代码比较简单,这里就不做过多介绍了。

方法二:利用拦截器中$injector,正式我现在项目中用的方法。

拦截器中虽然不能够注入别的东西,但是有个$injector有个get方法,可以获取到别的服务,代码非常简单:

request: function (config) {
                if (config.url.toString().indexOf('http://') === 0) {
                    $injector.get('$ionicLoading').show({
                        template: '<div><svg class="circular"><circle r="20" class="path" cx="50" cy="50" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>'
                    });
                }
                config.headers = config.headers || {};
                var token = localStorageService.get('token');

                if (token && token.expires_at && token.expires_at > new Date().getTime()) {
                    config.headers.Authorization = 'Bearer ' + token.access_token;
                }

                return config;
            }

在response中隐藏掉loading,注意这里无论是正确的返回还是错误的返回都必须隐藏

因为错误的返回后面各种操作代码比较多,这里就粘贴下正确的返回的代码:

            if(response.config.url.indexOf(' === 0 ){
                $injector.get('$ionicLoading').hide();
            }
            return response;
        }

其实也就是那一句hide,在项目我是用第二种方法的,比较推荐。

© 著作权归作者所有

共有 人打赏支持
邪气小生
粉丝 14
博文 52
码字总数 67752
作品 0
朝阳
程序员
私信 提问
加载中

评论(2)

邪气小生
邪气小生

引用来自“闫小军”的评论

十分感谢
闫小军
十分感谢
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
angular.js 1.4.1 发布,HTML的Web框架

angular.js 1.4.1 发布,更新内容如下: Bug 修复: **$compile:** + - workaround for IE11 MutationObserver + ([f3b1d0b7](https://github.com/angular/angular.js/commit/f3b1d0b723298a......

oschina
2015/06/17
2.5K
22
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

编码规范

4.、编码时的一些建议 1、尽量指定类、方法的final修饰符——虚拟机会想办法内联所有的final方法来减少方法执行时创建栈帧的数量,从而降低栈溢出的风险 2、尽量重用对象——重复new对象会增...

呵呵哒灬
34分钟前
2
0
第一个docker化的java应用

Docker 思想 集装箱 标准化:运输方式/存储方式/API 接口 隔离

BeanHo
35分钟前
1
0
数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
13
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
4
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部