In AngularJS können Sie Ihren eigenen Service zu machen, oder eine der vielen integrierten Dienste nutzen.
Was ist eine Service?
In AngularJS, ist ein Dienst, eine Funktion oder ein Objekt, das jeweils zur Verfügung steht, und beschränkt sich auf Ihre AngularJS Anwendung.
AngularJS hat über 30 integrierte Dienste. Einer von ihnen ist der $location Service.
Die $location Service hat Methoden , die Informationen über die Position der aktuellen Web - Seite zurück:
Beispiel
Verwenden Sie die $location Service in einem Controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Versuch es selber " Beachten Sie, dass die $location - Dienst an die Steuerung als Argument übergeben. Um den Dienst in der Steuereinheit zu verwenden, muss es als Abhängigkeit definiert werden.
Warum Services verwenden?
Für viele Dienstleistungen, wie die $location Service, scheint es , wie Sie Objekte , die sich bereits in der DOM, wie das verwenden könnte window.location Objekt, und man konnte, aber es würde einige Einschränkungen, zumindest für Ihre AngularJS Anwendung.
AngularJS ständig überwacht Ihre Anwendung, und für sie Veränderungen und Ereignisse richtig zu behandeln, bevorzugt AngularJS dass Sie die Verwendung $location Service anstelle des window.location Objekt.
Die $ HTTP-Dienst
Die $http - Service ist eine der häufigsten genutzten Dienste in AngularJS Anwendungen. Der Service stellt eine Anfrage an den Server und ermöglicht die Anwendung die Antwort handhaben.
Beispiel
Verwenden Sie die $http Service - Daten vom Server anfordern:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Versuch es selber " Dieses Beispiel zeigt eine sehr einfache Verwendung des $http Service. Erfahren Sie mehr über die $http Dienst in der AngularJS Http Tutorial .
Die $ timeout-Service
Die $timeout Service ist AngularJS "-Version der window.setTimeout Funktion.
Beispiel
Zeigen Sie eine neue Nachricht nach zwei Sekunden:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Versuch es selber " Das $ Intervall-Service
Das $interval - Service ist AngularJS "-Version der window.setInterval Funktion.
Beispiel
Zeigen Sie die Zeit, um jede Sekunde:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Versuch es selber " Erstellen Sie Ihre eigene Dienstleistung
Um einen eigenen Dienst, verbinden Sie Ihren Service an das Modul zu erstellen:
Erstellen Sie einen Dienst mit dem Namen hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Um Ihre maßgeschneiderten Service zu nutzen, fügen Sie es als eine Abhängigkeit, wenn Sie den Filter definieren:
Beispiel
Verwenden Sie das Maß Service namens hexafy eine Zahl in eine hexadezimale Zahl zu konvertieren:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Versuch es selber " Verwenden eines benutzerdefinierten Dienstes Innerhalb eines Filter
Sobald Sie einen Service erstellt haben, und verband es mit Ihrer Anwendung, können Sie den Dienst in jedem Controller, einer Richtlinie, Filter zu verwenden, oder sogar in andere Dienstleistungen.
Um den Dienst in einem Filter verwenden, fügen Sie es als eine Abhängigkeit, wenn Sie den Filter definieren:
Der Service hexafy im Filter verwendet myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Versuch es selber " Sie können den Filter verwenden, wenn die Werte von einem Objekt angezeigt wird, oder ein Array:
Erstellen Sie einen Dienst mit dem Namen hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Versuch es selber "