Ionic/Angular.js Глобальный предварительный загрузчик

Question

Я новичок в угловых и ионных. В основном потрачено около 2 часов на это.

Удивление, если кто-то может указать мне в правильном направлении.

В основном в моем контроллере.js Я загружаю удаленный json через $ http.

Я хочу показать предварительный загрузчик на каждом контроллере, который загружает удаленный контент.

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