Anzeigen von AJAX-Ladebalken in AngularJS

Question

Ich habe eine Best-Practice-Frage zum Anzeigen/Verbergen einer AJAX-Ladeanimation, während I/O ausgeführt wird. Zur Zeit habe ich die Animation am Umgang mit dem folgenden Code:

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> 

Ist dies der beste Weg, um die Aus-/Einblenden von der Ajax zu handhaben Lader? Ich sehe einige Probleme mit der Skalierbarkeit, da ich anfange, mehrere Module hinzuzufügen und für jeden einen separaten -Wert zu speichern.

Answer 1

Hier sind ein paar Lösungen:

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

https://github.com/zhoutuoy/ngRainbow

Einige davon manipulieren die CSS in einem Service. Aber der Code ist gut dokumentiert, warum. Ich hoffe, das hilft.

Answer 2

Die Technik, die verwendet wird, um dieses Verhalten zu erreichen, ist die Erstellung eines eigenen Interceptors, der (wie der Titel schon sagt) alle XHR-Anfragen abfängt.

Mehr dazu finden Sie in der AngularJS Dokumentation über sein:. http://code.angularjs.org/1.2.8/docs/api/ng $ http # description_interceptors

es ein ziemlich gut dokumentiertes Beispiel hat. Sie können auch den Stack-Überlauf suchen, um einen guten Ansatz dafür zu finden. Beachten Sie, dass Response Interceptors (nicht mit Interceptors zu verwechseln) in den neueren AngularJs Versionen veraltet sind.

Oder möchten Sie eine All-in-One-Lösung, können Sie eines der vielen Open-Source-Projekte auschecken, die calebboyd vorgeschlagen hat.