AngularJS-Dienste
In AngularJS können Sie Ihren eigenen Dienst erstellen oder einen der vielen integrierten Dienste verwenden.
Was ist ein Dienst?
In AngularJS ist ein Dienst eine Funktion oder ein Objekt, das für Ihre AngularJS-Anwendung verfügbar und auf diese beschränkt ist.
AngularJS hat etwa 30 eingebaute Dienste. Einer davon ist der $location
Service.
Der $locationDienst verfügt über Methoden, die Informationen über den Speicherort der aktuellen Webseite zurückgeben:
Beispiel
Verwenden Sie den $locationDienst in einem Controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Beachten Sie, dass der $locationDienst als Argument an den Controller übergeben wird. Um den Dienst in der Steuerung nutzen zu können, muss dieser als Abhängigkeit definiert werden.
Warum Dienste nutzen?
Für viele Dienste, wie den $locationDienst, scheint es, als könnten Sie Objekte verwenden, die sich bereits im DOM befinden, wie das window.location
Objekt, und Sie könnten, aber es hätte einige Einschränkungen, zumindest für Ihre AngularJS-Anwendung.
AngularJS überwacht Ihre Anwendung ständig, und damit Änderungen und Ereignisse ordnungsgemäß behandelt werden können, bevorzugt AngularJS, dass Sie den $location
Dienst anstelle des window.locationObjekts verwenden.
Der $http-Dienst
Der $httpDienst ist einer der am häufigsten verwendeten Dienste in AngularJS-Anwendungen. Der Dienst stellt eine Anfrage an den Server und lässt Ihre Anwendung die Antwort verarbeiten.
Beispiel
Verwenden Sie den $httpDienst, um Daten vom Server anzufordern:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Dieses Beispiel demonstriert eine sehr einfache Verwendung des $httpDienstes. Erfahren Sie mehr über den $httpDienst im AngularJS Http Tutorial .
Der $timeout-Dienst
Der $timeoutDienst ist die AngularJS-Version der
window.setTimeoutFunktion.
Beispiel
Nach zwei Sekunden eine neue Nachricht anzeigen:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Der $interval-Dienst
Der $intervalDienst ist die AngularJS-Version der
window.setIntervalFunktion.
Beispiel
Zeigen Sie die Zeit jede Sekunde an:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
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:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Um Ihren benutzerdefinierten Dienst zu verwenden, fügen Sie ihn beim Definieren des Controllers als Abhängigkeit hinzu:
Beispiel
Verwenden Sie den benutzerdefinierten Dienst namens hexafy, um eine Zahl in eine Hexadezimalzahl umzuwandeln:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Verwenden Sie einen benutzerdefinierten Dienst innerhalb eines Filters
Sobald Sie einen Dienst erstellt und mit Ihrer Anwendung verbunden haben, können Sie den Dienst in jedem Controller, jeder Anweisung, jedem Filter oder sogar in anderen Diensten verwenden.
Um den Dienst innerhalb eines Filters zu verwenden, fügen Sie ihn beim Definieren des Filters als Abhängigkeit hinzu:
Der hexafyim Filter verwendete Dienst myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Sie können den Filter verwenden, wenn Sie Werte aus einem Objekt oder einem Array anzeigen:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>