AngularJS-services
In AngularJS kun je je eigen service maken, of gebruik maken van een van de vele ingebouwde services.
Wat is een dienst?
In AngularJS is een service een functie of object die beschikbaar is voor en beperkt is tot uw AngularJS-toepassing.
AngularJS heeft ongeveer 30 ingebouwde services. Een daarvan is de $location
dienstverlening.
De $locationservice heeft methoden die informatie retourneren over de locatie van de huidige webpagina:
Voorbeeld
Gebruik de $locationservice in een controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Merk op dat de $locationservice als argument aan de controller wordt doorgegeven. Om de service in de controller te gebruiken, moet deze worden gedefinieerd als een afhankelijkheid.
Waarom Diensten gebruiken?
Voor veel services, zoals de $locationservice, lijkt het alsof je objecten kunt 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-toepassing.
AngularJS houdt constant toezicht op uw applicatie en om wijzigingen en gebeurtenissen goed te kunnen verwerken, geeft AngularJS er de voorkeur aan dat u de $location
service gebruikt in plaats van het window.locationobject.
De $http-service
De $httpservice is een van de meest gebruikte services in AngularJS-applicaties. De service doet een verzoek aan de server en laat uw toepassing het antwoord afhandelen.
Voorbeeld
Gebruik de $httpservice om gegevens van de server op te vragen:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Dit voorbeeld demonstreert een zeer eenvoudig gebruik van de $httpservice. Lees meer over de $httpservice in de AngularJS Http-zelfstudie .
De $timeout-service
De $timeoutservice is de AngularJS-versie van de
window.setTimeoutfunctie.
Voorbeeld
Na twee seconden een nieuw bericht weergeven:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
De $interval-service
De $intervalservice is de AngularJS-versie van de
window.setIntervalfunctie.
Voorbeeld
Geef elke seconde de tijd weer:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Creëer uw eigen service
Om uw eigen service te maken, sluit u uw service aan op de module:
Maak een service met de naam hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Om uw op maat gemaakte service te gebruiken, voegt u deze toe als afhankelijkheid bij het definiëren van de controller:
Voorbeeld
Gebruik de op maat gemaakte service genaamd hexafyom een getal om te zetten in een hexadecimaal getal:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Gebruik een aangepaste service in een filter
Nadat u een service hebt gemaakt en deze hebt verbonden met uw toepassing, kunt u de service gebruiken in elke controller, richtlijn, filter of zelfs binnen andere services.
Als u de service in een filter wilt gebruiken, voegt u deze toe als een afhankelijkheid bij het definiëren van het filter:
De service hexafydie in het filter wordt gebruikt myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
U kunt het filter gebruiken bij het weergeven van waarden van een object of een array:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>