AngularJS-tjenester
On oktober 5, 2021 by adminI AngularJS kan du lave din egen tjeneste eller bruge en af de mange indbyggede tjenester.
Hvad er en tjeneste?
I AngularJS er en tjeneste en funktion eller et objekt, som er tilgængelig for og begrænset til din AngularJS-applikation.
AngularJS har omkring 30 indbyggede tjenester. En af dem er $location-tjenesten.
$location-tjenesten har metoder, der returnerer oplysninger om placeringen af den aktuelle webside:
Eksempel
Brug $location-tjenesten i en controller:
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Prøv det selv ”
Bemærk, at $location-tjenesten overføres til controlleren som et argument. For at kunne bruge tjenesten i controlleren skal den defineres som en afhængighed.
Hvorfor bruge tjenester?
For mange tjenester, som $location-tjenesten, ser det ud til, at du kunne bruge objekter, der allerede er i DOM, som window.location-objektet, og det kunne du også, men det ville have nogle begrænsninger, i det mindste for din AngularJS-applikation.
AngularJS overvåger konstant din applikation, og for at den kan håndtere ændringer og hændelser korrekt, foretrækker AngularJS, at du bruger $location-tjenesten i stedet for window.location-objektet.
Den $http-tjeneste
Den $http-tjeneste er en af de mest almindeligt anvendte tjenester i AngularJS-applikationer. Tjenesten foretager en anmodning til serveren og lader din applikation håndtere svaret.
Eksempel
Brug $http-tjenesten til at anmode om data fra serveren:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
});
Prøv selv ”
Dette eksempel demonstrerer en meget simpel brug af $http-tjenesten. Få mere at vide om $http-tjenesten i AngularJS Http-vejledningen.
Tjenesten $timeout
Tjenesten $timeout er AngularJS’ version af window.setTimeout-funktionen.
Eksempel
Vis en ny meddelelse efter to sekunder:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “Hvordan har du det i dag?”;
}, 2000);
});
Prøv det selv ”
Tjenesten $interval
Tjenesten $interval er AngularJS’ version af window.setInterval-funktionen.
Eksempel
Vis tiden hvert sekund:
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Prøv selv ”
Opret din egen tjeneste
For at oprette din egen tjeneste skal du forbinde din tjeneste med modulet:
Opret en tjeneste ved navn hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
}
});
For at bruge din specialfremstillede tjeneste skal du tilføje den som en afhængighed, når du definerer controlleren:
Eksempel
Brug den specialfremstillede tjeneste ved navn hexafy til at konvertere et tal til et hexadecimalt tal:
$scope.hex = hexafy.myFunc(255);
});
Prøv selv ”
Brug en brugerdefineret tjeneste inde i et filter
Når du har oprettet en tjeneste og tilsluttet den til din applikation, kan du bruge tjenesten i en controller, et direktiv, et filter eller endda inde i andre tjenester.
For at bruge tjenesten inde i et filter skal du tilføje den som en afhængighed, når du definerer filteret:
Tjenesten hexafy, der bruges i filteret myFormat:
Prøv selv ”
Du kan bruge filteret, når du skal vise værdier fra et objekt eller et array:
Opret en tjeneste ved navn hexafy:
<li ng-repeat=”x in counts”>{{x | myFormat}}}</li>
</ul>
</ul>
Prøv det selv ”
Skriv et svar