配合angularjs中interceptor一勞永逸的加載$ionicloading的方法

在我們日常的項目開發中，每當頁面需要和服務端存在交互的時候，為了界面的友好，我們都會在界面中給個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;
        }