Ich benutze den $http
Dienst von AngularJS, um eine Ajax-Anfrage zu stellen.
Wie kann ein Spinner-GIF (oder eine andere Art von Besetztanzeige) angezeigt werden, während die Ajax-Anforderung ausgeführt wird?
Ich sehe so etwas ajaxstartevent
in der AngularJS-Dokumentation nicht.
angularjs
ajax
busyindicator
Ajay Beniwal
quelle
quelle
Antworten:
Hier sind die
aktuellenfrüheren AngularJS-Beschwörungsformeln:Hier ist der Rest davon (HTML / CSS) .... mit
um es umzuschalten. HINWEIS: Das Obige wird im Winkelmodul zu Beginn des Beitrags verwendet
quelle
angular.element('#mydiv').show()
anstelle von$('#mydiv').show()
ng-class
Direktive zu verwenden, anstatt JQuery zum Ein- und Ausblenden von Elementen zu verwenden?Dies hängt wirklich von Ihrem spezifischen Anwendungsfall ab, aber ein einfacher Weg würde einem Muster wie diesem folgen:
Und dann reagieren Sie in Ihrer Vorlage darauf:
quelle
loading
als Ganzzahl deklarieren$scope.loading = 0;
, wann eine Anforderung beginnt$scope.loading++;
und wann sie endet$scope.loading--;
. An der Vorlage gibt es nichts zu ändern. Der Spinner wird also angezeigt, wenn mindestens eine Anforderung ausgeführt wird, und ist für den Rest der Zeit$scope.loading = false
sowohl den erfolgreichen als auch den fehlgeschlagenen Rückruf einzugeben, besteht darin, ihn in den.finally()
. Es würde aussehen wie:mySvc.get().then(success, fail).finally(function() { $scope.loading = false; });
Hier ist eine Version mit einem
directive
undng-hide
.Dies zeigt den Lader während aller Anrufe über den Winkeldienst an
$http
.In der Vorlage:
<div class="loader" data-loading></div>
Richtlinie:
Durch die Verwendung der
ng-hide
Klasse für das Element können Sie jquery vermeiden.Anpassen: Hinzufügen eines
interceptor
Wenn Sie einen Ladeabfangjäger erstellen, können Sie den Lader basierend auf einer Bedingung ein- / ausblenden.
Richtlinie:
Abfangjäger:
spinner
wannresponse.background === true;
request
und / oderresponse
einstellen$rootScope.$broadcast("loader_show");
oder$rootScope.$broadcast("loader_hide");
Weitere Informationen zum Schreiben eines Abfangjägers
quelle
$http
in einem beliebigen Dienst einen Anruf tätigen .Wenn Sie ngResource verwenden, ist das $ aufgelöste Attribut eines Objekts für Lader nützlich:
Für eine Ressource wie folgt:
Sie können einen Loader mit dem Attribut $ resolve des Ressourcenobjekts verknüpfen:
quelle
https://github.com/wongatech/angular-http-loader ist dafür ein gutes Projekt.
Beispiel hier http://wongatech.github.io/angular-http-loader/
Der folgende Code zeigt ein Vorlagenbeispiel / loader.tpl.html, wenn eine Anforderung ausgeführt wird.
quelle
Ich habe gerade die
angular-busy
Direktive entdeckt, die je nach asynchronem Aufruf einen kleinen Loader anzeigt.Wenn Sie beispielsweise ein machen müssen
GET
, verweisen Sie auf das Versprechen in Ihrem$scope
,und nenne es so:
Hier ist die GitHub.
Sie können es auch installieren mit
bower
(vergessen Sie nicht, Ihre Projektabhängigkeiten zu aktualisieren):quelle
Wenn Sie Ihre API-Anrufe innerhalb eines Dienstes / einer Fabrik verpacken, können Sie dort den Ladezähler verfolgen (pro Antwort und ausgezeichneter gleichzeitiger Vorschlag von @JMaylin) und den Ladezähler über eine Direktive referenzieren. Oder irgendeine Kombination davon.
API WRAPPER
SPINNER DIRECTIVE
VERWENDUNG
quelle
Für Seitenladevorgänge und Modalitäten ist es am einfachsten, die
ng-show
Direktive und eine der Bereichsdatenvariablen zu verwenden. Etwas wie:Hier
someObject
wird der Spinner angezeigt , solange er nicht definiert ist. Sobald der Dienst mit Daten zurückkehrt undsomeObject
gefüllt ist, kehrt der Spinner in seinen verborgenen Zustand zurück.quelle
Dies ist der einfachste Weg, einen Spinner hinzuzufügen, denke ich: -
Sie können ng-show mit dem div-Tag eines dieser schönen Spinner verwenden. Http://tobiasahlin.com/spinkit/ {{Dies ist nicht meine Seite}}
und dann können Sie diese Art von Logik verwenden
quelle
Fügen Sie dieses CSS hinzu:
Und nur in Ihrem Winkel hinzufügen:
$ rootScope.loading = false; $ rootScope.loading = true; -> wenn $ http.get endet.
quelle
Teilen Sie meine Version der großartigen Antwort von @bulltorious, die für neuere Winkel-Builds aktualisiert wurde (ich habe Version 1.5.8 mit diesem Code verwendet), und haben Sie auch die Idee von @ JMaylin aufgenommen, einen Zähler zu verwenden, um für mehrere gleichzeitige Anforderungen robust zu sein Option zum Überspringen der Anzeige der Animation für Anforderungen, die weniger als eine Mindestanzahl von Millisekunden dauern:
quelle
Sie können Angular Interceptor verwenden, um HTTP-Anforderungsaufrufe zu verwalten
https://stackoverflow.com/a/49632155/4976786
quelle
Einfacher Weg ohne Interceptors oder jQuery
Dies ist eine einfache Möglichkeit, einen Spinner anzuzeigen, für den keine Bibliothek, Intercepter oder jQuery eines Drittanbieters erforderlich sind.
Setzen und setzen Sie in der Steuerung ein Flag.
Verwenden Sie im HTML das Flag:
Das
vm.starting
Flag wird gesetzt,true
wenn die XHR gestartet wird, und gelöscht, wenn die XHR abgeschlossen ist.quelle
Das funktioniert gut für mich:
HTML:
Winkel:
Während das von $ http zurückgegebene Versprechen noch aussteht, wird ng-show es als "wahr" bewerten. Dies wird automatisch aktualisiert, sobald das Versprechen gelöst ist ... genau das, was wir wollen.
quelle
Wird nach folgendem Intercepter verwendet, um die Ladeleiste auf http-Anfrage anzuzeigen
quelle
quelle
Erstellen Sie eine Direktive mit diesem Code:
quelle
Eine andere Lösung, um das Laden zwischen verschiedenen URL-Änderungen anzuzeigen, ist:
Und dann im Markup einfach den Spinner mit umschalten
ng-show="loading"
.Wenn Sie es auf Ajax-Anfragen anzeigen möchten, fügen Sie es einfach hinzu,
$scope.loading++
wenn die Anfrage beginnt und wenn sie endet$scope.loading--
.quelle
Sie können auch so etwas ausprobieren:
Direktive erstellen:
Dann fügen Sie mainCtrl so etwas hinzu
Und HTML kann so aussehen:
quelle
Auf folgende Weise werden alle Anforderungen zur Kenntnis genommen und erst ausgeblendet, wenn alle Anforderungen erledigt sind:
quelle
Da sich die Funktionalität von position: fixed kürzlich geändert hat, hatte ich Schwierigkeiten, den GIF-Loader über allen Elementen anzuzeigen, sodass ich Angulars eingebaute jQuery verwenden musste .
Html
Css
Regler
Hoffe das hilft :)
quelle
Alle Antworten sind oder zu kompliziert oder müssen bei jeder Anfrage einige Variablen setzen, was sehr falsch ist, wenn wir das DRY-Konzept kennen. In diesem einfachen Interceptor-Beispiel setze ich die Maus auf Warten, wenn Ajax startet, und auf Auto, wenn Ajax endet.
Code muss in der Anwendungskonfiguration hinzugefügt werden
app.config
. Ich habe gezeigt, wie man die Maus beim Laden ändert, aber dort ist es möglich, Loader-Inhalte anzuzeigen / auszublenden oder einige CSS-Klassen hinzuzufügen, die den Loader anzeigen, zu entfernen.Interceptor wird bei jedem Ajax-Aufruf ausgeführt, sodass bei jedem http-Aufruf keine speziellen booleschen Variablen ($ scope.loading = true / false usw.) erstellt werden müssen.
quelle
Hier ist meine Implementierung, so einfach wie eine ng-show und ein Anforderungszähler.
Es wird ein neuer Dienst für alle Anfragen an $ http verwendet:
Und dann können Sie Ihre Loader-Basis anhand der Anzahl der aktuellen Anrufe verwenden:
quelle
Wenn Sie den Loader für jeden http-Anforderungsaufruf anzeigen möchten, können Sie den Angular Interceptor verwenden, um http-Anforderungsaufrufe zu verwalten.
Hier ist ein Beispielcode
quelle
Verwenden Sie einfach ng-show und einen Booleschen Wert
Keine Notwendigkeit, eine Richtlinie zu verwenden, keine Notwendigkeit, kompliziert zu werden.
Hier ist der Code, den Sie neben dem Senden-Button oder wo immer Sie möchten, dass sich der Spinner befindet:
Und dann in Ihrem Controller:
quelle
Hier ist meine Lösung, die meiner Meinung nach viel einfacher ist als die andere, die hier gepostet wurde. Ich bin mir nicht sicher, wie "hübsch" es ist, aber es hat alle meine Probleme gelöst
Ich habe einen CSS-Stil namens "Laden"
Das HTML für das Laden von div kann beliebig sein, aber ich habe dort einige FontAwesome-Symbole und die Spin-Methode verwendet:
Auf die Elemente, die Sie ausblenden möchten, schreiben Sie einfach Folgendes:
und in der Funktion setze ich dies nur auf Last.
Ich benutze SignalR, also in der Funktion hubProxy.client.allLocks (wenn es durch die Sperren geht), die ich gerade stelle
Dadurch wird auch das {{someField}} ausgeblendet, wenn die Seite geladen wird, da ich die Ladeklasse auf Laden setze und AngularJS sie anschließend entfernt.
quelle