AngularJSでのAJAXローディングバーの表示

Question

I/Oの実行中にajax読み込みアニメーションの表示/非表示に関するベストプラクティスの質問があります。現在、私は次のコード使用してアニメーションを処理しています：

JS

app.controller('MyController', function($scope, Resource) { 
    $scope.loading = true; 
    Resource.query(function(response) { 
     $scope.loading = false; 
     $scope.items = response; 
    }); 
}); 

HTML

<ul ng-controller="MyController"> 
    <div ng-if="loading"> 
     <img src="/assets/ajax-loader.gif"> 
    </div> 
    <li ng-repeat="item in items">{{ item }}</li> 
</ul> 

することは、これはAJAXの上映/隠ぺいを処理するための最良の方法ですローダ？私は複数のモジュールを追加し始め、それぞれに別々のloading値を格納しなければならないので、いくつかのスケーラビリティの問題があります。

https://github.com/chieffancypants/angular-loading-bar

https://github.com/zhoutuoy/ngRainbow

これらのいくつかは、サービス内のCSSを操作する：ここで

Answer 1

は、いくつかのソリューションです。しかし、このコードは理由について十分に文書化されています。 私はこれが役立つことを願っています。

Answer 2

この動作を実現するために使用される手法は、（タイトルが示唆するように）XHR要求を傍受する独自のインターセプタを作成することです。

この上

詳細はAngularJSドキュメントでオーバー見つけることができます：。 http://code.angularjs.org/1.2.8/docs/api/ng $ HTTP＃description_interceptors

それはかなりよく文書化された例があります。スタックオーバーフローを検索して、これに対する良いアプローチを行うこともできます。 AngularJsの新しいバージョンでは、レスポンスインターセプタ（インターセプタと混同しないでください）は推奨されません。

また、オールインワンソリューションが必要な場合は、calebboydが提案した多くのオープンソースプロジェクトの1つをチェックアウトすることができます。