AngularJS Dienste
In AngularJS kan jy jou eie diens maak, of een van die vele ingeboude dienste gebruik.
Wat is 'n diens?
In AngularJS is 'n diens 'n funksie, of objek, wat beskikbaar is vir, en beperk is tot, jou AngularJS-toepassing.
AngularJS het ongeveer 30 ingeboude dienste. Een daarvan is die $location
diens.
Die $locationdiens het metodes wat inligting oor die ligging van die huidige webblad terugstuur:
Voorbeeld
Gebruik die $locationdiens in 'n kontroleerder:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Let daarop dat die $locationdiens as 'n argument aan die beheerder deurgegee word. Om die diens in die beheerder te gebruik, moet dit as 'n afhanklikheid gedefinieer word.
Waarom dienste gebruik?
Vir baie dienste, soos die $locationdiens, lyk dit of jy voorwerpe kan gebruik wat reeds in die DOM is, soos die window.location
voorwerp, en jy kan, maar dit sal 'n paar beperkings hê, ten minste vir jou AngularJS-toepassing.
AngularJS hou voortdurend toesig oor jou toepassing, en om veranderinge en gebeure behoorlik te hanteer, verkies AngularJS dat jy die $location
diens in plaas van die window.locationobjek gebruik.
Die $http-diens
Die $httpdiens is een van die dienste wat die meeste in AngularJS-toepassings gebruik word. Die diens rig 'n versoek aan die bediener, en laat jou toepassing die antwoord hanteer.
Voorbeeld
Gebruik die $httpdiens om data vanaf die bediener aan te vra:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Hierdie voorbeeld demonstreer 'n baie eenvoudige gebruik van die $httpdiens. Kom meer te wete oor die $httpdiens in die AngularJS Http-tutoriaal .
Die $timeout-diens
Die $timeoutdiens is AngularJS se weergawe van die
window.setTimeoutfunksie.
Voorbeeld
Wys 'n nuwe boodskap na twee sekondes:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Die $intervaldiens
Die $intervaldiens is AngularJS se weergawe van die
window.setIntervalfunksie.
Voorbeeld
Wys die tyd elke sekonde:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Skep jou eie diens
Om jou eie diens te skep, koppel jou diens aan die module:
Skep 'n diens met die naam hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Om jou pasgemaakte diens te gebruik, voeg dit as 'n afhanklikheid by wanneer jy die beheerder definieer:
Voorbeeld
Gebruik die pasgemaakte diens genaamd hexafyom 'n getal in 'n heksadesimale getal om te skakel:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Gebruik 'n pasgemaakte diens binne 'n filter
Sodra jy 'n diens geskep het en dit aan jou toepassing gekoppel het, kan jy die diens in enige beheerder, instruksie, filter of selfs binne ander dienste gebruik.
Om die diens binne 'n filter te gebruik, voeg dit as 'n afhanklikheid by wanneer die filter gedefinieer word:
Die diens hexafywat in die filter gebruik word myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Jy kan die filter gebruik wanneer jy waardes van 'n voorwerp of 'n skikking vertoon:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>