イオン負荷データTHENディスプレイホームページ

Question

私のイオンアプリケーションでは、アプリケーションの開始時に（httpリクエストを介して）すべてのデータを読み込みます。

私のすべてのHTTP要求が完了し、ホームページが表示されていることを確認します。その間、読み込み画面を表示するというアイデアがあります。

これを行うにはどうすればよいですか？

angular.module('App.Common', []) 
    .service('myData', function($http, API_URL) { 
     this.initData = function() { 
      self.getDataType2(); //calls http request 
      self.getDataType2(); //calls http request 
      self.getDataType3(); //calls http request 
      self.getDataType4(); //calls http request 
      self.getDataType5(); //calls http request 
      self.getDataType6(); //calls http request 
     }; 
}); 


angular.module('App.Home', []) 

.controller('Ctrl', function(myData) { 
    myData.initData(); 
}); 

とinitData（）が実行されていない間、私のhome.htmlに、私は、ロードページを表示します。

私は積載部分は、このコード

$ionicLoading.show({ 
    content: 'Loading', 
    animation: 'fade-in', 
    showBackdrop: true, 
    maxWidth: 200, 
    showDelay: 0 
    }); 

が、どのように/

$ionicLoading.hide(); 

を使用する際に任意のヘルプが

Answer 1

まずあなたがすべての要求はあなたが$ qをサービスに組み込まれて使用することができ、この目標を達成するために

に解決されることを確認する必要があります。あなたは、このようなサービスになってしまいます：

angular.module('App.Common', []) 
    .service('myData', function($q, $http, API_URL) { 
     this.initData = function() { 
      return $q.all([ 
       self.getDataType1(); //calls http request 
       self.getDataType2(); //calls http request 
       self.getDataType3(); //calls http request 
       self.getDataType4(); //calls http request 
       self.getDataType5(); //calls http request 
       self.getDataType6(); //calls http request 
      ]).then(function(data1, data2, data3, ...) { 
       return { data1: data1, ... }; 
      });     
     }; 
    }); 

これはあなたのすべてのHTTP要求が行われたときに約束オブジェクトを返しますinitData方法を提供します。

次に、データが準備できるまでビューがロードされないようにするには、解決データを使用するように状態を構成する必要があります。

angular 
    .module('App', ['ionic', 'App.Common']) 
    .config(function($stateProvider) { 
     $stateProvider.state('home', { 
      url: '/home', 
      views: { 
       '': { 
        templateUrl: '/path-to-your-state-view', 
        controller: 'HomeController' 
       } 
      }, 
      resolve: { 
       data: function($ionicLoading, myData) { 
        $ionicLoading.show(); 

        return myData.initData().finally($ionicLoading.hide); 
       } 
      } 
     }); 
    }); 

最後に、ロードするためにその解決の依存関係を待つために、あなたのコントローラーを伝える必要があります。

angular 
    .module('App') 
    .controller('HomeController', function($scope, data) { 
     $scope.data = data; 
    }); 

私はあなたのアプリケーション（状態、モジュール名、等）に関するかなりの仮定が、私は、これは出発点として機能します願っています。

関連するすべての情報源は以下のとおりです。

angular $qとui-router state resolves

Answer 2

は、データのリターンを得るための各機能を持っていただければ幸いであろうことを知っています$ httpの呼び出し結果は約束となります。 $ q.allを使用して、$ q.allへの呼び出しが他のすべての非同期呼び出しが解決されたときに解決する約束を返します。 scope.model.loadingのような変数を使用するか、サービスのプロパティである可能性があり、initを呼び出す前にtrueに設定し、$ q.allハンドラでfalseを設定します。その変数をビューで使用して、表示するものを決定します。

angular.module('App.Common', []) 
    .service('myData', function($http, API_URL) { 
     this.dataLoaded = false; 
     this.initData = function() { 

      let data2 = self.getDataType2(); //calls http request 
      let data3 = self.getDataType2(); //calls http request 
      let data4 = self.getDataType3(); //calls http request 
      let data5 = self.getDataType4(); //calls http request 
      let data6 = self.getDataType5(); //calls http request 
      let data7 = self.getDataType6(); //calls http request 

      return $q.all([data2,data3,data4,data5,data6,data7]).then(function(){ 
       self.dataLoaded = true; 
      }) 
     }; 
}); 


angular.module('App.Home', []) 

.controller('Ctrl', function($scope, myData) { 
    myData.initData(); 
    $scope.myData = myData; // in the view you can just bind to myData.dataLoaded in an ng-if or ng-show to toggle showing/hiding certain parts 
});