AngularJS-palvelut

AngularJS:ssä voit luoda omia palveluitasi tai käyttää yhtä monista sisäänrakennetuista palveluista.

Mitä palvelu on?

AngularJS:ssä palvelut ovat funktioita tai objekteja, joita voidaan käyttää ja jotka ovat käytettävissä vain AngularJS-sovelluksessasi.

AngularJS:llä on noin 30 sisäänrakennettua palvelua. Yksi niistä on $location Palvelu.

$location Palvelulla on menetelmiä, jotka voivat palauttaa tietoja nykyisestä sivun sijainnista:

Esimerkki

Käytä $location-palvelua ohjaimessa:

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

Kokeile itse

Huomaa,$location Palvelu annetaan parametrina ohjaimelle. Jotta voit käyttää palvelua ohjaimessa, on sitä määriteltävä riippuvuutena.

Miksi käyttää palvelua?

monet palvelut, kuten $location palvelua, voit käyttää jo olemassa olevia DOM-objekteja (esimerkiksi window.location-objekti），mutta sillä on joitakin rajoituksia, ainakin AngularJS-sovelluksesi kannalta.

AngularJS valvoo jatkuvasti sovellustasi, jotta se voi käsitellä muutokset ja tapahtumat oikein, AngularJS suosittelee, että käytät $location palvelu eikä window.location-objekti.

$http-palvelu

$http Palvelu on yksi AngularJS-sovelluksissa käytetyimmistä palveluista. Se lähettää pyyntöjä palvelimelle ja antaa sovelluksellesi käsitellä vastaukset.

Esimerkki

Hae tietoja palvelimelta $http-palvelun avulla:

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 osoittaa $http Palvelun erittäin yksinkertainen käyttö. Lisätietoja $http-palvelusta löydät AngularJS Http-opasesta.

$timeout-palvelu

$timeout Palvelu on AngularJS-versio window.setTimeout funktiota.

Esimerkki

Näytä uusi viesti kaksi sekuntia myöhemmin:

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

Kokeile itse

$interval-palvelu

$interval Palvelu on AngularJS-versio window.setInterval funktiota.

Esimerkki

Näytä kellonaika sekunnissa:

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 palvelusi

Jos haluat luoda oman palvelun, yhdistä se moduuliin:

Luo nimi hexafy palvelu:

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

Jos haluat käyttää mukautettua palveluasi, lisää se riippuvuutena ohjaimen määrittäessä:

Esimerkki

Käyttämällä nimeltä hexafy mukautettua palvelua luku voidaan muuntaa heksadesimaaliluvuksi:

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

Kokeile itse

Mukautetun palvelun käyttö suodattimessa

Luo palvelu ja yhdistä se sovellukseesi, ja voit käyttää tätä palvelua missä tahansa ohjaimessa, ohjeessa, suodattimessa tai jopa muissa palveluissa.

Jos haluat käyttää palvelua suodattimessa, lisää se riippuvuutena suodattimen määrittäessä:

Suodattimen myFormat käyttämä palvelu hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  });
});

Kokeile itse

Voit käyttää tätä suodattimea näyttääksesi arvoja objekteissa tai taulukoissa:

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

Kokeile itse