Articles

AngularJS:n palvelut

On 5 lokakuun, 2021 by

AngularJS:ssä voit tehdä oman palvelun tai käyttää jotakin monista sisäänrakennetuista palveluista.

Mikä on palvelu?

AngularJS:ssä palvelu on funktio tai objekti, joka on käytettävissä AngularJS-sovelluksessasi ja joka on rajattu koskemaan vain tätä sovellusta.

AngularJS:ssä on n. 30 sisäänrakennettua palvelua. Yksi niistä on $location-palvelu.

$location-palvelussa on metodeja, jotka palauttavat tietoa nykyisen verkkosivun sijainnista:

Esimerkki

Käytä $location-palvelua kontrollerissa:

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

Kokeile itse ”

Huomaa, että $location-palvelu välitetään kontrolleriin argumenttina. Jotta palvelua voidaan käyttää kontrollerissa, se on määriteltävä riippuvuudeksi.

Miksi käyttää palveluita?

Monien palveluiden, kuten $location-palvelun, kohdalla näyttää siltä, että voisit käyttää DOM:ssa jo olevia objekteja, kuten window.location-objekti, ja voisitkin, mutta siinä olisi joitain rajoituksia, ainakin AngularJS-sovelluksessa.

AngularJS valvoo sovellustasi jatkuvasti, ja jotta se käsittelisi muutokset ja tapahtumat oikein, AngularJS suosii, että käytät $location-palvelua window.location-olion sijaan.

The $http Service

Palvelu $http on yksi yleisimmin käytetyistä palveluista AngularJS-sovelluksissa. Palvelu tekee pyynnön palvelimelle ja antaa sovelluksesi käsitellä vastauksen.

Esimerkki

Käytä $http-palvelua pyytämään tietoja palvelimelta:

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

Kokeile itse ”

Tämä esimerkki havainnollistaa hyvin yksinkertaista $http-palvelun käyttöä. Lue lisää $http-palvelusta AngularJS Http Tutorialista.

The $timeout Service

Palvelu $timeout on AngularJS:n versio window.setTimeout-funktiosta.

Esimerkki

Näytä uusi viesti kahden sekunnin kuluttua:

var app = angular.module(’myApp’, );
app.controller(’myCtrl’, function($scope, $timeout) {
$scope.myHeader = ”Hello World!”;
$timeout(function () {
$scope.myHeader = ”Miten voit tänään?”;
}, 2000);
});

Kokeile itse ”

Palvelu $interval

Palvelu $interval on AngularJS:n versio window.setInterval-funktiosta.

Esimerkki

Ajan näyttäminen sekunnin välein:

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

Kokeile itse ”

Luo oma palvelu

Luoaksesi oman palvelun liitä palvelusi moduuliin:

Luo palvelu nimeltä hexafy:

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

Käyttääksesi räätälöityä palvelua, lisää se riippuvuussuhteeksi määrittäessäsi ohjainta:

Esimerkki

Käytä räätälöityä palvelua nimeltä hexafy muuttaaksesi numeron heksadesimaaliluvuksi:

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

Kokeile itse ”

Käytä mukautettua palvelua suodattimen sisällä

Kun olet luonut palvelun ja liittänyt sen sovellukseesi, voit käyttää palvelua missä tahansa ohjaimessa, direktiivissä, suodattimessa tai jopa muiden palvelujen sisällä.

Käyttääksesi palvelua suodattimen sisällä, lisää se riippuvuussuhteeksi suodatinta määritettäessä:

Suodattimessa käytettävä hexafy palvelu myFormat:

app.filter(’myFormat’,);

Kokeile itse ”

Suodatinta voit käyttää, kun näytät arvoja objekteista tai joukosta:

Luo palvelu nimeltä hexafy:

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

Kokeile itse ”

Vastaa

Sähköpostiosoitettasi ei julkaista.