Articles

Usługi AngularJS

On 5 października, 2021 by

W AngularJS możesz stworzyć własną usługę lub użyć 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. Jedną z nich jest usługa $location.

Usługa $location ma metody, które zwracają informacje o położeniu bieżącej strony internetowej:

Przykład

Użyj usługi $location w kontrolerze:

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

Try it Yourself ”

Zauważ, że usługa $location jest przekazywana do kontrolera jako argument. Aby użyć usługi w kontrolerze, musi być ona zdefiniowana jako zależność.

Dlaczego warto używać Usług?

W przypadku wielu usług, takich jak usługa $location, wydaje się, że mógłbyś użyć obiektów, które są już w DOM, takich jak obiekt window.location, i mógłbyś, ale miałoby to pewne ograniczenia, przynajmniej dla twojej aplikacji AngularJS.

AngularJS stale nadzoruje twoją aplikację, i aby prawidłowo obsługiwała zmiany i zdarzenia, AngularJS woli, abyś używał usługi $location zamiast obiektu window.location.

Usługa $http

Usługa $http jest jedną z najczęściej używanych usług w aplikacjach AngularJS. Usługa wykonuje żądanie do serwera i pozwala twojej aplikacji obsłużyć odpowiedź.

Przykład

Użyj usługi $http, aby zażądać 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;
});
});

Spróbuj sam ”

Ten przykład demonstruje bardzo proste użycie usługi $http. Dowiedz się więcej o usłudze $http w AngularJS Http Tutorial.

Usługa $timeout

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

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);
});

Spróbuj sam ”

Usługa $interval

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

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 ”

Utwórz własną usługę

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

Utwórz usługę o nazwie hexafy:

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

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

Przykład

Użyj niestandardowej usługi o nazwie hexafy, aby przekonwertować liczbę na liczbę szesnastkową:

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

Try it Yourself ”

Use a Custom Service Inside a Filter

Po utworzeniu usługi i podłączeniu jej do aplikacji możesz użyć usługi w dowolnym kontrolerze, dyrektywie, filtrze, a nawet wewnątrz innych usług.

Aby użyć usługi wewnątrz filtru, dodaj ją jako zależność podczas definiowania filtru:

Usługa hexafyużyta w filtrze myFormat:

app.filter(’myFormat’,);

Próbuj sam ”

Filtr możesz użyć podczas wyświetlania wartości z obiektu lub tablicy:

Utwórz usługę o nazwie hexafy:

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

Try it Yourself ”

.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.