Articles

Služby AngularJS

On 5 října, 2021 by

V AngularJS si můžete vytvořit vlastní službu nebo použít některou z mnoha vestavěných služeb.

Co je to služba?

V AngularJS je služba funkce nebo objekt, který je k dispozici pro vaši aplikaci AngularJS a je pro ni omezen.

AngularJS má asi 30 vestavěných služeb. Jednou z nich je služba $location.

Služba $location má metody, které vracejí informace o umístění aktuální webové stránky:

Příklad

Použití služby $location v kontroléru:

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

Vyzkoušejte si to sami “

Všimněte si, že služba $location se do kontroléru předává jako argument. Aby bylo možné službu v kontroléru použít, musí být definována jako závislost.

Proč používat služby?

U mnoha služeb, jako je služba $location, se zdá, že byste mohli použít objekty, které jsou již v DOM, jako je objekt window.location, a také byste mohli, ale mělo by to určitá omezení, alespoň pro vaši aplikaci AngularJS.

AngularJS neustále dohlíží na vaši aplikaci, a aby mohl správně zpracovávat změny a události, dává AngularJS přednost tomu, abyste místo objektu window.location používali službu $location.

Služba $http

Služba $http je jednou z nejčastěji používaných služeb v aplikacích AngularJS. Služba provede požadavek na server a nechá vaši aplikaci zpracovat odpověď.

Příklad

Pro vyžádání dat ze serveru použijte službu $http:

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

Vyzkoušejte si to sami “

Tento příklad demonstruje velmi jednoduché použití služby $http. Více se o službě $http dozvíte v AngularJS Http Tutorial.

Služba $timeout

Služba $timeout je verze funkce window.setTimeout v AngularJS.

Příklad

Zobrazení nové zprávy po dvou sekundách:

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

Vyzkoušejte si to sami “

Služba $interval

Služba $interval je verze funkce window.setInterval v systému AngularJS.

Příklad

Zobrazení času každou sekundu:

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

Vyzkoušejte si to sami “

Vytvořte si vlastní službu

Pro vytvoření vlastní služby připojte službu k modulu:

Vytvořte službu s názvem hexafy:

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

Chcete-li použít vlastní vytvořenou službu, přidejte ji jako závislost při definování řadiče:

Příklad

Použijte vlastní vytvořenou službu s názvem hexafy pro převod čísla na šestnáctkové číslo:

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

Vyzkoušejte si to sami “

Použití vlastní služby uvnitř filtru

Po vytvoření služby a jejím připojení k aplikaci můžete službu použít v libovolném kontroléru, direktivě, filtru nebo dokonce uvnitř jiných služeb.

Chcete-li službu použít uvnitř filtru, přidejte ji při definování filtru jako závislost:

Služba hexafy použitá ve filtru myFormat:

app.filter(‚myFormat‘,);

Vyzkoušejte si to sami “

Filtr můžete použít při zobrazování hodnot z objektu, nebo pole:

Vytvořte službu s názvem hexafy:

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

Vyzkoušejte si to “

.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.