Problem
Nachdem du einen HTTP-Aufruf abgesetzt hast, möchtest du einen Ladebalken anzeigen, bis dieser beendet wurde.
Lösung
💡 Keine Lust zu lesen?
Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.
Mehr Informationen zur Angular-Schulung
Wir schreiben eine Direktive, die ein Element, z.B. einen Ladebalken einblendet, solange mindestens eine HTTP-Anfrage in Bearbeitung ist. Die Direktive ist isoliert, damit sie an jeder beliebigen Stelle verwendet werden kann.
Hier die wichtigsten Punkte der Lösung:
- Ob ein Aufruf noch in der Schwebe ist, können wir mit
$http.pendingRequests.length > 0überprüfen. - Einem Watcher können wir in AngularJS nicht nur Variablen, sondern auch Funktionen übergeben. Watcher werden ständig aufgerufen, somit sollte die Funktion nicht komplex sein. Der Vergleich von
pendingRequestsist einfach genug, um die Applikation nicht träge zu machen.
In der Direktive überprüft der Watcher, ob noch eine Anfrage aussteht. Das Ergebnis (true/false) schreibt dieser in eine Variable waiting. Mit ng-show="waiting" blenden wir im Template den Ladebalken ein oder aus.
application.js
angular
.module("cookbookApp", [])
.directive("waitingForRequest", function ($http) {
var pendingRequests = function () {
return $http.pendingRequests.length > 0;
};
return {
restrict: "E",
scope: {},
template: '<div ng-show="waiting">Waiting for request to finish...</div>',
controller: function ($scope) {
$scope.$watch(pendingRequests, function (value) {
console.log("Pending requests: " + $http.pendingRequests.length);
$scope.waiting = value;
});
},
};
})
.controller("MainCtrl", function ($scope, $http) {
$http.get("https://api.github.com/users/sbrink");
});index.html
<html ng-app="cookbookApp">
[[cta:training-bottom]]
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script src="application.js"></script>
</head>
<body ng-controller="MainCtrl">
<waiting-for-request></waiting-for-request>
</body>
</html>
Sascha Brink
Gründer von Angular.DE
Überzeugter Webentwickler und seit über 15+ Jahren im IT-Umfeld tätig.
Sascha betreut regelmäßig Angular-Projekte und unterstützt Firmen bei der Ausbildung ihrer Mitarbeiter. Im Jahr 2013 hat er die Platform AngularJS.DE gestartet um das Framework in Deutschland bekannter zu machen. Sascha gibt Angular- und JavaScript-Schulungen auf deutsch und englisch.
Weitere Artikel
Was sind Angular und AngularJS?
Was sind die Unterschiede zwischen Angular und AngularJS?
Migration AngularJS zu Angular
Migration mit ngUpgrade leichtgemacht. Eine Zusammenfassung über alle wichtigen Schritte, wie ihr eure AngularJS App zu einer Angular App migrieren könnt.
Migration AngularJS zu Angular [Video]
Angular Version >2.x kommt … und es macht alles anders! Ist das wirklich so? Was hat das für meine Anwendung zu bedeuten? Mehr darüber in diesem Artikel!
