AngularJS-Dienste
On Oktober 5, 2021 by adminIn AngularJS kann man einen eigenen Dienst erstellen oder einen der vielen eingebauten Dienste verwenden.
Was ist ein Dienst?
In AngularJS ist ein Dienst eine Funktion oder ein Objekt, das für die AngularJS-Anwendung zur Verfügung steht und auf diese beschränkt ist.
AngularJS hat etwa 30 eingebaute Dienste. Einer davon ist der $location-Dienst.
Der $location-Dienst hat Methoden, die Informationen über den Standort der aktuellen Webseite zurückgeben:
Beispiel
Verwenden Sie den $location-Dienst in einem Controller:
app.controller(‚customersCtrl‘, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Probieren Sie es selbst aus “
Beachten Sie, dass der $location Dienst als Argument an den Controller übergeben wird. Um den Dienst im Controller zu verwenden, muss er als Abhängigkeit definiert werden.
Warum Dienste verwenden?
Für viele Dienste, wie den $location-Dienst, könnte man anscheinend Objekte verwenden, die sich bereits im DOM befinden, wie das window.location-Objekt, und das könnte man auch, aber es würde einige Einschränkungen haben, zumindest für Ihre AngularJS-Anwendung.
AngularJS überwacht Ihre Anwendung ständig, und damit es Änderungen und Ereignisse richtig behandeln kann, bevorzugt AngularJS, dass Sie den $location-Dienst anstelle des window.location-Objekts verwenden.
Der $http-Dienst
Der $http-Dienst ist einer der am häufigsten verwendeten Dienste in AngularJS-Anwendungen. Der Dienst stellt eine Anfrage an den Server und lässt die Anwendung die Antwort verarbeiten.
Beispiel
Verwenden Sie den $http-Dienst, um Daten vom Server anzufordern:
app.controller(‚myCtrl‘, function($scope, $http) {
$http.get(„welcome.htm“).then(function (response) {
$scope.myWelcome = response.data;
});
});
Probieren Sie es selbst aus “
Dieses Beispiel demonstriert eine sehr einfache Verwendung des $http-Dienstes. Erfahren Sie mehr über den $http-Dienst im AngularJS Http-Tutorial.
Der $timeout-Dienst
Der $timeout-Dienst ist die AngularJS-Version der window.setTimeout-Funktion.
Beispiel
Nach zwei Sekunden eine neue Nachricht anzeigen:
app.controller(‚myCtrl‘, function($scope, $timeout) {
$scope.myHeader = „Hallo Welt!“;
$timeout(function () {
$scope.myHeader = „Wie geht es Ihnen heute?“;
}, 2000);
});
Versuchen Sie es selbst “
Der $interval Service
Der $interval Service ist AngularJS‘ Version der window.setInterval Funktion.
Beispiel
Die Zeit jede Sekunde anzeigen:
app.controller(‚myCtrl‘, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Versuchen Sie es selbst “
Erstellen Sie Ihren eigenen Dienst
Um Ihren eigenen Dienst zu erstellen, verbinden Sie Ihren Dienst mit dem Modul:
Erstellen Sie einen Dienst mit dem Namen hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
);
Um Ihren benutzerdefinierten Dienst zu verwenden, fügen Sie ihn bei der Definition des Controllers als Abhängigkeit hinzu:
Beispiel
Verwenden Sie den benutzerdefinierten Dienst mit dem Namen hexafy, um eine Zahl in eine Hexadezimalzahl umzuwandeln:
$scope.hex = hexafy.myFunc(255);
});
Versuchen Sie es selbst “
Verwenden Sie einen benutzerdefinierten Dienst innerhalb eines Filters
Wenn Sie einen Dienst erstellt und mit Ihrer Anwendung verbunden haben, können Sie den Dienst in einem beliebigen Controller, einer Richtlinie, einem Filter oder sogar innerhalb anderer Dienste verwenden.
Um den Dienst in einem Filter zu verwenden, fügen Sie ihn bei der Definition des Filters als Abhängigkeit hinzu:
Der im Filter verwendete Dienst hexafy:
Versuchen Sie es selbst “
Sie können den Filter verwenden, wenn Sie Werte aus einem Objekt oder einem Array anzeigen:
Erstellen Sie einen Dienst namens hexafy:
<li ng-repeat=“x in counts“>{{x | myFormat}}</li>
</ul>
Versuchen Sie es selbst “
Schreibe einen Kommentar