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(); 
    }); 
}