イオンアプリで進行状況バーを追加する方法

Question

私は本当にあなたの助けが必要です。私はイオンプロジェクトを初めて利用しています。現在、プロジェクトに取り組んでいます。このアプリは、$ httpを使ってwordpressからブログ投稿を取得します。空白の画面ではなく、ページがロード中であることをユーザーに伝えるためにプログレスバーを追加するにはどうすればよいですか？おかげ

Answer 1

あなたは$ionicLoading

ユーザーとの対話をブロックしながら活動を示すのに使用することができるオーバーレイを使用することができます。

コントローラ内で読み込みが行われます。まず、$ ionicLoadingをコントローラに依存関係として注入する必要があります。その後、$ ionicLoading.show（）メソッドを呼び出す必要があり、読み込みが表示されます。これを無効にするには、$ ionicLoading.hide（）メソッドがあります。

例： -

.controller('myCtrl', function($scope, $ionicLoading) { 

    $scope.showLoading = function() { 
     $ionicLoading.show({ 
     template: 'Loading...' 
     }); 
    }; 

    $scope.hideLoading = function(){ 
     $ionicLoading.hide(); 
    }; 
}); 

Read this for more information

Answer 2

あなたはhttpの呼び出しを追跡するために$httpProvider.interceptorsを使用することができます。

あなたは、あなたのプロジェクトにコードの下に追加することでこれを実現することができますイオンローダーに here

それとも

を表示するために書かれた工場を見つけることができます。

が表示され、スピナーを非表示にする angular.module('app',[]).config(...)

$httpProvider.interceptors.push(function ($rootScope) { 
     return { 
      request: function (config) { 
       $rootScope.$broadcast('loading:show') 
       return config 
      }, 
      response: function (response) { 
       $rootScope.$broadcast('loading:hide') 
       return response 
      } 
     } 
    }) 

Answer 3

使用$ionicLoadingディレクティブでコードの下に追加angular.module('app',[]).run(...)

 $rootScope.$on('loading:show', function() { 
      $ionicLoading.show({ template: '<ion-spinner class="spinner-assertive"></ion-spinner>' }) 
     }) 

     $rootScope.$on('loading:hide', function() { 
      $ionicLoading.hide() 
     }) 

にコードの下に追加します。ここに例があります。 のあとにコールの前にshow()に電話をかけて非表示にしてください。

controller('myCtrl', function($scope, $ionicLoading) { 
    $ionicLoading.show({ 
    template: '<ion-spinner icon="android"></ion-spinner>' 
    }); 
    $http({ 
     method: 'POST', 
     url: 'http://example.com', 
    }) 
     .success(function(){ 
      $ionicLoading.hide(); 
     }); 
});