ตัวโหลดล่วงหน้าทั่วโลก Ionic / Angular.js

ฉันยังใหม่กับเชิงมุมและไอออนิก โดยทั่วไปใช้เวลาประมาณ 2 ชั่วโมงในเรื่องนี้

สงสัยว่ามีใครสามารถชี้ฉันไปในทิศทางที่ถูกต้องที่นี่หรือไม่

โดยพื้นฐานแล้วใน controller.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();
    };

ฉันเพิ่งใช้แอปเริ่มต้น บางทีฉันอาจพลาดอะไรบางอย่างไป ฉันเห็นบางอย่างในการใช้บริการ ตัวอย่างสั้นๆ หรือข้อเสนอแนะใดๆ จะได้รับการชื่นชม


ionic-framework angularjs
person limit    schedule 15.05.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

คุณสามารถสรุปให้เป็นบริการได้อย่างง่ายดาย

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();
  });
}
person Dmitriy Nevzorov    schedule 15.05.2016