AngularJS Services
On oktober 5, 2021 by adminIn AngularJS kunt u uw eigen service maken, of een van de vele ingebouwde services gebruiken.
Wat is een Service?
In AngularJS is een service een functie, of object, dat beschikbaar is voor, en beperkt is tot, uw AngularJS applicatie.
AngularJS heeft ongeveer 30 ingebouwde services. Een daarvan is de $location service.
De $location service heeft methoden die informatie teruggeven over de locatie van de huidige webpagina:
Example
Gebruik de $location service in een controller:
app.controller(‘klantenCtrl’, function($scope, $locatie) {
$scope.mijnUrl = $locatie.absUrl();
});
Probeer het zelf ”
Merk op dat de $location-service als een argument aan de controller wordt doorgegeven. Om de service in de controller te gebruiken, moet deze worden gedefinieerd als een dependency.
Waarom services gebruiken?
Voor veel services, zoals de $location service, lijkt het alsof je objecten zou kunnen gebruiken die al in het DOM staan, zoals het window.location object, en dat zou ook kunnen, maar het zou enkele beperkingen hebben, in ieder geval voor je AngularJS applicatie.
AngularJS houdt voortdurend toezicht op je applicatie, en om veranderingen en gebeurtenissen goed te kunnen afhandelen, geeft AngularJS er de voorkeur aan dat je de $location service gebruikt in plaats van het window.location object.
De $http Service
De $http service is een van de meest gebruikte services in AngularJS applicaties. De service doet een verzoek aan de server, en laat uw applicatie het antwoord afhandelen.
Example
Gebruik de $http service om gegevens van de server op te vragen:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
Probeer het zelf ”
Dit voorbeeld demonstreert een zeer eenvoudig gebruik van de $http-service. Leer meer over de $http service in de AngularJS Http Tutorial.
De $timeout Service
De $timeout service is AngularJS’ versie van de window.setTimeout functie.
Example
Toon een nieuw bericht na twee seconden:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hallo Wereld!”;
$timeout(function () {
$scope.myHeader = “Hoe gaat het vandaag met je?”;
}, 2000);
});
Probeer het zelf ”
De $interval-service
De $interval-service is AngularJS’ versie van de window.setInterval-functie.
Example
Laat elke seconde de tijd zien:
app.controller(‘mijnCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Probeer het zelf ”
Maak je eigen service
Om je eigen service te maken, verbind je je service met de module:
Maak een service met de naam hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
});
Om uw zelfgemaakte service te gebruiken, voegt u deze toe als een dependency bij het definiëren van de controller:
Example
Gebruik de zelfgemaakte service met de naam hexafy om een getal om te zetten in een hexadecimaal getal:
$scope.hex = hexafy.myFunc(255);
});
Probeer het zelf ”
Een aangepaste service binnen een filter gebruiken
Als u eenmaal een service hebt gemaakt en deze aan uw toepassing hebt gekoppeld, kunt u de service in elke controller, directive, filter of zelfs binnen andere services gebruiken.
Om de service binnen een filter te gebruiken, voegt u deze toe als een afhankelijkheid bij het definiëren van het filter:
De service hexafy die in het filter wordt gebruikt myFormat:
Probeer het zelf ”
U kunt het filter gebruiken bij het weergeven van waarden van een object, of een array:
Maak een service met de naam hexafy:
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>
Probeer het zelf ”
Geef een antwoord