Articles

AngularJS Services

On oktober 5, 2021 by

I AngularJS kan du skapa en egen tjänst eller använda en av de många inbyggda tjänsterna.

Vad är en tjänst?

I AngularJS är en tjänst en funktion eller ett objekt som är tillgängligt för och begränsat till din AngularJS-applikation.

AngularJS har cirka 30 inbyggda tjänster. En av dem är $location-tjänsten.

Tjänsten $location har metoder som returnerar information om platsen för den aktuella webbsidan:

Exempel

Använd $location-tjänsten i en controller:

var app = angular.module(’myApp’, );
app.controller(’customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

Prova själv ”

Bemärk att $location-tjänsten skickas in i kontrollern som ett argument. För att kunna använda tjänsten i kontrollern måste den definieras som ett beroende.

Varför använda tjänster?

För många tjänster, som $location-tjänsten, verkar det som om du skulle kunna använda objekt som redan finns i DOM, som window.location-objektet, och det skulle du kunna, men det skulle ha vissa begränsningar, åtminstone för din AngularJS-applikation.

AngularJS övervakar ständigt din applikation, och för att den ska kunna hantera ändringar och händelser på rätt sätt föredrar AngularJS att du använder $location-tjänsten istället för window.location-objektet.

Tjänsten $http

Tjänsten $http är en av de vanligaste tjänsterna i AngularJS-applikationer. Tjänsten gör en begäran till servern och låter ditt program hantera svaret.

Exempel

Använd $http-tjänsten för att begära data från servern:

var app = angular.module(’myApp’, );
app.controller(’myCtrl’, function($scope, $http) {
$http.get(”welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
});

Prova själv ”

Det här exemplet demonstrerar en mycket enkel användning av tjänsten $http. Läs mer om $http-tjänsten i handledningen AngularJS Http.

Tjänsten $timeout

Tjänsten $timeout är AngularJS version av window.setTimeout-funktionen.

Exempel

Visa ett nytt meddelande efter två sekunder:

var app = angular.module(’myApp’, );
app.controller(’myCtrl’, function($scope, $timeout) {
$scope.myHeader = ”Hello World!”;
$timeout(function () {
$scope.myHeader = ”How are you today?”;
}, 2000);
});

Prova själv ”

Tjänsten $interval

Tjänsten $interval är AngularJS version av funktionen window.setInterval.

Exempel

Visa tiden varje sekund:

var app = angular.module(’myApp’, );
app.controller(’myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

Prova själv ”

Skapa en egen tjänst

För att skapa en egen tjänst ansluter du din tjänst till modulen:

Skapa en tjänst som heter hexafy:

app.service(’hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
}
});

För att använda din skräddarsydda tjänst lägger du till den som ett beroende när du definierar kontrollern:

Exempel

Använd den skräddarsydda tjänsten som heter hexafy för att omvandla ett tal till ett hexadecimalt tal:

app.controller(’myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

Prova själv ”

Använd en anpassad tjänst i ett filter

När du har skapat en tjänst och anslutit den till programmet kan du använda tjänsten i en controller, ett direktiv, ett filter eller till och med i andra tjänster.

För att använda tjänsten inuti ett filter lägger du till den som ett beroende när du definierar filtret:

Tjänsten hexafy som används i filtret myFormat:

app.filter(’myFormat’,);

Prova själv ”

Du kan använda filtret när du ska visa värden från ett objekt eller en array:

Skapa en tjänst som heter hexafy:

<ul>
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>
</ul>

Prova dig fram ”

Lämna ett svar

Din e-postadress kommer inte publiceras.