Usługi AngularJS

W AngularJS możesz tworzyć własne usługi lub używać jednej z wielu wbudowanych usług.

Co to jest usługa?

W AngularJS, usługi są funkcjami lub obiektami, które można używać i są dostępne tylko w aplikacji AngularJS.

AngularJS ma około 30 wbudowanych usług. Jedną z nich jest $location usług.

$location Usługa ma metody, które zwracają informacje o aktualnej lokalizacji strony:

Przykład

Użycie usługi $location w kontrolerze:

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

Spróbuj sam

Proszę zauważyć,$location Usługi są przekazywane jako parametry do kontrolera. Aby używać usługi w kontrolerze, musi być ona zdefiniowana jako zależność.

Dlaczego warto używać usług?

Dla wielu usług, takich jak $location usług, wydaje się, że możesz używać już istniejących obiektów w DOM (np. obiektu window.location）， ale istnieją pewne ograniczenia, przynajmniej dla Twojej aplikacji AngularJS.

AngularJS stale monitoruje Twoją aplikację, aby poprawnie obsługiwać zmiany i wydarzenia, AngularJS woli, abyś używał $location usługę, zamiast obiektu window.location.

Usługa $http

Ten przykład pokazuje: Usługa ta jest jedną z najczęściej używanych w aplikacjach AngularJS. Usługa wysyła żądania do serwera i pozwala na przetwarzanie odpowiedzi przez aplikację.

Przykład

Pobieranie danych z serwera za pomocą usługi $http:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  app.controller('myCtrl', function($scope, $http) {}}
    $http.get("welcome.htm").then(function (response) {
  });
});

Spróbuj sam

$scope.myWelcome = response.data; Ten przykład pokazuje: $http

Prosty sposób użycia usługi $timeout. Dowiedz się więcej o usłudze $http w AngularJS Http Tutorial.

$timeout Usługa jest wersją AngularJS: window.setTimeout funkcja.

Przykład

Wyświetlenie nowej wiadomości po dwóch sekundach:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Cześć Świat!";
  $timeout(function () {
    $scope.myHeader = "Jak się masz dzisiaj?";
  }, 2000);
});

Spróbuj sam

Usługa $interval

$interval Usługa jest wersją AngularJS: window.setInterval funkcja.

Przykład

Wyświetlanie czasu co 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);
});

Spróbuj sam

Tworzenie własnej usługi

Aby utworzyć własną usługę, podłącz ją do modułu:

Tworzenie nazwy hexafy usługi:

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

Aby użyć swojej niestandardowej usługi, dodaj ją jako zależność podczas definiowania kontrolera:

Przykład

Używając niestandardowej usługi o nazwie hexafy, konwertuje się liczbę na liczbę szesnastkową:

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

Spróbuj sam

Użycie niestandardowej usługi w filtrze

Po utworzeniu usługi i połączeniu jej z aplikacją, możesz używać tej usługi w dowolnym kontrolerze, instrukcji, filtrze lub nawet innych usługach.

Aby użyć usługi w filtrze, dodaj ją jako zależność podczas definiowania filtra:

Usługa używana w filtrze myFormat: hexafy

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

Spróbuj sam

Możesz używać tego filtra do wyświetlania wartości obiektu lub tablicy:

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

Spróbuj sam