Korzystam z $http
usługi AngularJS, aby wykonać żądanie Ajax.
W jaki sposób można wyświetlać GIF przędzarki (lub inny wskaźnik zajętości) podczas wykonywania żądania Ajax?
Nie widzę nic ajaxstartevent
w dokumentacji AngularJS.
angularjs
ajax
busyindicator
Ajay Beniwal
źródło
źródło
Odpowiedzi:
Oto
aktualneprzeszłe inkantacje AngularJS:Oto reszta (HTML / CSS) .... za pomocą
przełączać to. UWAGA: powyższe stosuje się w module kątowym na początku postu
źródło
angular.element('#mydiv').show()
zamiast$('#mydiv').show()
ng-class
dyrektywy zamiast używania JQuery do wyświetlania i ukrywania elementów?To naprawdę zależy od konkretnego przypadku użycia, ale prosty sposób byłby zgodny z następującym wzorcem:
A następnie zareaguj na to w swoim szablonie:
źródło
loading
jako liczbę całkowitą$scope.loading = 0;
, kiedy żądanie zaczyna się$scope.loading++;
, a kiedy kończy$scope.loading--;
. I nie ma nic do zmiany w szablonie. Tak więc pokrętło jest wyświetlane, gdy trwa co najmniej jedno żądanie, i jest ukryte przez resztę czasu$scope.loading = false
oddzwaniania powodzenia i niepowodzenia, jest włączenie go.finally()
. Wyglądałoby to tak:mySvc.get().then(success, fail).finally(function() { $scope.loading = false; });
Oto wersja używająca
directive
ang-hide
.Spowoduje to wyświetlenie modułu ładującego podczas wszystkich połączeń za pośrednictwem
$http
usługi angular .W szablonie:
<div class="loader" data-loading></div>
dyrektywa:
używając
ng-hide
klasy na elemencie, możesz uniknąć jquery.Dostosuj: dodaj
interceptor
Jeśli utworzysz przechwytywacz ładujący, możesz pokazać / ukryć moduł ładujący na podstawie warunku.
dyrektywa:
przechwytywacz:
spinner
kiedyresponse.background === true;
request
i / lubresponse
ustaw$rootScope.$broadcast("loader_show");
lub$rootScope.$broadcast("loader_hide");
więcej informacji na temat pisania przechwytywacza
źródło
$http
dowolnej usługi.Jeśli używasz ngResource, atrybut $ resolved obiektu jest użyteczny dla programów ładujących:
Dla zasobu, jak następuje:
Możesz połączyć moduł ładujący z atrybutem $ resolved obiektu zasobu:
źródło
https://github.com/wongatech/angular-http-loader to dobry projekt do tego.
Przykład tutaj http://wongatech.github.io/angular-http-loader/
Poniższy kod pokazuje przykład szablonu / loader.tpl.html, gdy występuje żądanie.
źródło
Właśnie odkryłem
angular-busy
dyrektywę, która pokazuje mały moduł ładujący w zależności od jakiegoś wywołania asynchronicznego.Na przykład, jeśli musisz zrobić
GET
, odwołaj się do obietnicy w swoim$scope
,i nazwij to tak:
Oto GitHub.
Możesz go również zainstalować za pomocą
bower
(nie zapomnij zaktualizować zależności projektu):źródło
Jeśli pakujesz swoje połączenia API w ramach usługi / fabryki, możesz tam śledzić licznik załadunku (według odpowiedzi i doskonałej jednoczesnej sugestii @JMaylin) i odwoływać się do licznika załadunku za pomocą dyrektywy. Lub dowolna ich kombinacja.
API WRAPPER
DYREKTYWA W SPRAWIE SPINNERA
STOSOWANIE
źródło
W przypadku ładowania stron i modów najłatwiejszym sposobem jest użycie
ng-show
dyrektywy i użycie jednej ze zmiennych danych zakresu. Coś jak:Tutaj, gdy
someObject
jest niezdefiniowany, wyświetla się pokrętło. Gdy usługa powróci z danymi isomeObject
zostanie zapełniona, pokrętło powróci do stanu ukrytego.źródło
To chyba najłatwiejszy sposób na dodanie pokrętła: -
Możesz użyć ng-show z tagiem div dowolnego z tych pięknych spinnerów http://tobiasahlin.com/spinkit/ {{To nie jest moja strona}}
i wtedy możesz użyć tego rodzaju logiki
źródło
Dodaj ten css:
I po prostu dodaj kątowo:
$ rootScope.loading = false; $ rootScope.loading = true; -> kiedy kończy się $ http.get.
źródło
Udostępniając moją wersję świetnej odpowiedzi z @bulltorious, zaktualizowaną dla nowszych kompilacji kątowych (użyłem wersji 1.5.8 z tym kodem), a także włączyłem pomysł @ JMaylin dotyczący używania licznika, aby był odporny na wiele równoczesnych żądań, a także opcja pominięcia wyświetlania animacji dla żądań trwających krócej niż pewną minimalną liczbę milisekund:
źródło
Za pomocą przechwytywacza kątowego można zarządzać połączeniami żądań HTTP
https://stackoverflow.com/a/49632155/4976786
źródło
Prosty sposób bez przechwytywaczy i jQuery
Jest to prosty sposób na pokazanie spinnera, który nie wymaga biblioteki innej firmy, przechwytywaczy ani jQuery.
W kontrolerze ustaw i zresetuj flagę.
W kodzie HTML użyj flagi:
vm.starting
Flaga jest ustawionatrue
podczas uruchamiania XHR i wyczyszczone, gdy ukończone, XHR.źródło
Działa to dla mnie dobrze:
HTML:
Kątowy:
Podczas gdy obietnica zwrócona z $ http jest w toku, ng-show oceni ją jako „prawdziwą”. Jest on automatycznie aktualizowany po rozwiązaniu obietnicy ... dokładnie tego chcemy.
źródło
Wykorzystano następujący interpreter, aby pokazać pasek ładowania na żądanie http
źródło
źródło
utwórz dyrektywę za pomocą tego kodu:
źródło
Innym rozwiązaniem pokazującym ładowanie między różnymi zmianami adresu URL jest:
A następnie w znacznikach po prostu przełącz pokrętło
ng-show="loading"
.Jeśli chcesz wyświetlać go w żądaniach ajax, po prostu dodaj,
$scope.loading++
kiedy żądanie zaczyna się i kiedy kończy, dodaj$scope.loading--
.źródło
Możesz także spróbować czegoś takiego:
Utwórz dyrektywę:
Następnie dodajesz coś takiego do mainCtrl
HTML może wyglądać następująco:
źródło
Poniższy sposób uwzględni wszystkie żądania i ukryje je dopiero po wykonaniu wszystkich żądań:
źródło
Ponieważ ostatnio zmieniono funkcjonalność position: fixed , miałem trudności z wyświetleniem programu ładującego gif ponad wszystkimi elementami, więc musiałem użyć wbudowanego jQuery angulara .
HTML
Css
Kontroler
Mam nadzieję że to pomoże :)
źródło
Wszystkie odpowiedzi są lub są skomplikowane, lub trzeba ustawić niektóre zmienne przy każdym żądaniu, co jest bardzo złą praktyką, jeśli znamy koncepcję DRY. Oto prosty przykład przechwytywacza: ustawiam mysz na czekanie, kiedy uruchamia się ajax i ustawiam na auto, kiedy kończy się ajax.
Kod należy dodać w konfiguracji aplikacji
app.config
. Pokazałem, jak zmienić mysz przy ładowaniu, ale tam można pokazać / ukryć dowolną zawartość modułu ładującego lub dodać, usunąć niektóre klasy css, które pokazują moduł ładujący.Przechwytywacz będzie działał przy każdym wywołaniu ajax, więc nie trzeba tworzyć specjalnych zmiennych boolowskich ($ scope.loading = true / false itp.) Przy każdym wywołaniu http.
źródło
Oto moja implementacja, tak prosta jak ng-show i licznik żądań.
Używa nowej usługi dla wszystkich żądań do $ http:
Następnie możesz użyć bazy ładującej na podstawie liczby bieżących połączeń:
źródło
jeśli chcesz wyświetlać moduł ładujący dla każdego wywołania żądania HTTP, możesz użyć przechwytywacza kątowego do zarządzania wywołaniami żądania HTTP,
oto przykładowy kod
źródło
Wystarczy użyć ng-show i boolean
Nie ma potrzeby stosowania dyrektywy, nie trzeba się komplikować.
Oto kod, który należy umieścić obok przycisku Prześlij lub w dowolnym miejscu, w którym ma znajdować się pokrętło:
A następnie w kontrolerze:
źródło
Oto moje rozwiązanie, które moim zdaniem jest znacznie łatwiejsze niż inne zamieszczone tutaj. Nie jestem pewien, jak to jest „ładne”, ale rozwiązało wszystkie moje problemy
Mam styl css o nazwie „ładowanie”
HTML dla div ładowania może być dowolny, ale użyłem tam kilku ikon FontAwesome i metody wirowania:
Na elementach, które chcesz ukryć, po prostu napisz to:
i w funkcji właśnie ustawiłem to na obciążenie.
Korzystam z SignalR, więc w funkcji hubProxy.client.allLocks (po zakończeniu przechodzenia przez blokady) umieszczam
Ukrywa to również {{someField}} podczas ładowania strony, ponieważ ustawiam klasę ładowania na ładowanie, a AngularJS usuwa ją później.
źródło