Ionic/Angular.js全局預加載器

Question

我是新來的角和離子。基本上花了大約2個小時。

想知道是否有人能在這裏指出我正確的方向。

基本上在我的controller.js我通過$ http加載遠程json。

我想在每個加載遠程內容的控制器上顯示預加載器。

.controller('InformationCtrl', function ($scope, $http, $ionicLoading) { 
    $scope.show = function() { 
     $ionicLoading.show({ 
      template: '<p>Loading...</p><ion-spinner></ion-spinner>' 
     }); 
    }; 
    $scope.hide = function() { 
     $ionicLoading.hide(); 
    }; 
    $scope.show($ionicLoading); 
    $http.get($scope.base_url + "information") 
     .then(function (response) { 
      $scope.hide($ionicLoading); 
      $scope.information = response.data; 
     }, function errorCallback(response) { 
      $scope.hide($ionicLoading); 
      alert("error loading content"); 
     }); 
}) 

我想知道，有沒有更簡單的方法只需要創建一個全局函數preloaderShow（）和preloaderHide（）？好像很多代碼必須在每個控制器中包含以下代碼，以後如果我想修改微調器，我必須更新每行代碼？

.controller('InformationCtrl', function ($scope, $http, $ionicLoading) { 
    $scope.show = function() { 
     $ionicLoading.show({ 
      template: '<p>Loading...</p><ion-spinner></ion-spinner>' 
     }); 
    }; 
    $scope.hide = function() { 
     $ionicLoading.hide(); 
    }; 

我只是用啓動應用程序，所以也許我失去了一些東西，我看到的東西上使用服務，任何簡單的例子或建議，將不勝感激。

Answer 1

你可以很容易抽象到服務

angular.module('app').factory('loader', function loaderFactory ($ionicLoading) { 
    return { 
    show: function() { 
     $ionicLoading.show({ 
     template: '<p>Loading...</p><ion-spinner></ion-spinner>' 
     }); 
    }, 
    hide: function() { 
     $ionicLoading.hide(); 
    }; 
    } 
}); 

然後在你控制器

angular.module('app').controller('InformationCtrl', function ($scope, $http, loader) { 
    loader.show(); 
    $http.get($scope.base_url + "information") 
    .then(function (response) { 
    $scope.information = response.data; 
    }, function errorCallback(response) { 
    alert("error loading content"); 
    }) 
    .finally(function() { 
    loader.hide(); 
    }); 
}