Usługi AngularJS
W AngularJS możesz stworzyć własną usługę lub skorzystać z jednej z wielu wbudowanych usług.
Co to jest usługa?
W AngularJS usługa jest funkcją lub obiektem, który jest dostępny i ograniczony do Twojej aplikacji AngularJS.
AngularJS ma około 30 wbudowanych usług. Jednym z nich jest $location
usługa.
Serwis $locationposiada metody zwracające informacje o lokalizacji aktualnej strony internetowej:
Przykład
Skorzystaj z $locationusługi w kontrolerze:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Zauważ, że $locationusługa jest przekazywana do kontrolera jako argument. Aby skorzystać z usługi w kontrolerze należy ją zdefiniować jako zależność.
Dlaczego warto korzystać z Usług?
W przypadku wielu usług, takich jak $locationusługa, wydaje się, że można używać obiektów, które są już w DOM, takich jak window.location
obiekt, i można, ale miałoby to pewne ograniczenia, przynajmniej dla aplikacji AngularJS.
AngularJS stale nadzoruje twoją aplikację i aby poprawnie obsługiwała zmiany i zdarzenia, AngularJS woli abyś używał $location
usługi zamiast window.locationobiektu.
Usługa $http
Usługa $httpjest jedną z najczęściej używanych usług w aplikacjach AngularJS. Usługa wysyła żądanie do serwera i umożliwia aplikacji obsługę odpowiedzi.
Przykład
Skorzystaj z $httpusługi w celu żądania danych z serwera:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Ten przykład demonstruje bardzo proste użycie $httpusługi. Dowiedz się więcej o $httpusłudze w samouczku AngularJS HTTP .
Usługa $timeout
Usługa $timeoutjest wersją
window.setTimeoutfunkcji AngularJS.
Przykład
Wyświetl nową wiadomość po dwóch sekundach:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Usługa $interwał
Usługa $intervaljest wersją
window.setIntervalfunkcji AngularJS.
Przykład
Wyświetlaj czas 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);
});
Stwórz własną usługę
Aby stworzyć własną usługę, połącz swoją usługę z modułem:
Utwórz usługę o nazwie hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Aby skorzystać z niestandardowej usługi, dodaj ją jako zależność podczas definiowania kontrolera:
Przykład
Użyj niestandardowej usługi o nazwie, hexafyaby przekonwertować liczbę na liczbę szesnastkową:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Użyj niestandardowej usługi w filtrze
Po utworzeniu usługi i podłączeniu jej do aplikacji możesz korzystać z usługi w dowolnym kontrolerze, dyrektywie, filtrze, a nawet w innych usługach.
Aby korzystać z usługi wewnątrz filtra, dodaj ją jako zależność podczas definiowania filtra:
Usługa hexafyużyta w filtrze myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Możesz użyć filtra podczas wyświetlania wartości z obiektu lub tablicy:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>