Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Tworzenie usług w AngularJS

W poprzednim artykule o Angularze była mowa o tym, jak posługiwać się jego dokumentacją i jak korzystać z podstawowych narzędzi, które oferuje. Teraz pokazujemy, w jaki sposób napisać własne usługi.

W utworzonej aplikacji (patrz: „Budowanie aplikacji z AngularJS 1.x”, „IT w Administracji” nr 4/2017) po stronie klienta wykorzystaliśmy kod, w którym usługa $http łączyła się z serwerem i pobierała dla nas dane:

$http({
method : "POST",
url : "/dane"
});

Kod ten przypisany był do obsługi jednego przycisku na stronie. Jeżeli chcielibyśmy wykorzystać ponownie dane z serwera, umieścilibyśmy ten sam kod drugi raz w naszym skrypcie. A jeżeli chcielibyśmy przekazywać dodatkowe dane w żądaniu, to kod urośnie, i to w tylu miejscach, w ilu został przez nas powtórzony. Często te same kody stosowane są w wielu aplikacjach i w tym przypadku ten sam fragment występowałby w wielu miejscach. Gdyby jednak trzeba było zmienić adres URL żądania z /dane na /daneDlaKlienta, musielibyśmy wprowadzić taką samą zmianę w wielu miejscach, nierzadko myląc się przy tym. Może się jednak okazać, że po zmianie wersji frameworka usługa pozwala na przekazanie dodatkowych danych konfiguracyjnych. Takie niedogodności i problemy rozwiążemy, zamykając obsługę żądania w funkcję i udostępnienie jej każdemu, kto jej potrzebuje:

function pobierzDane(data) {
return $http({
method : "POST",
url : "/dane"
});
}

W taki sposób zamknęliśmy logikę w jedną funkcję (enkapsulacja), co pozwoli w razie potrzeby dołączyć ją do kodu i wywoływać za każdym razem, kiedy potrzebujemy danych z serwera. Angular daje nam jednak inny, bardziej elegancki i spójny sposób na rozwiązanie tego problemu – usługi.

Tworzenie usług

O usługach wspominaliśmy już w poprzednim artykule. Są to m.in. stałe, wartości, serwisy i fabryki, które zamykają kod w jedną całość i pozwalają na jego wielokrotne używanie – wbudowaną w Angulara usługą jest też używany przez nas $http. Aby wykorzystać usługę w swoim komponencie (kontrolerze, innej usłudze), należy ją „wstrzyknąć”, najlepiej przy użyciu zalecanej przez dokumentację metody inline array. Usługi tworzymy, posługując się API modułu, czyli na obiekcie typu angular.Module zwracanym po utworzeniu modułu lub jego pobraniu. Dokumentacja dotycząca usług znajduje się w opisie typu Module w głównym module ng (itwa.pl/9a). Proces ten przypomina tworzenie znanego nam już kontrolera.

Usługa value

Najprostszą usługą jest wartość (value), czyli po prostu zmienna, która będzie wykorzystywana do przechowywania danych. Według dokumentacji metoda ta przyjmuje, jako pierwszy argument, nazwę o typie string (u nas jest to ‘czyZalogowany’), a jako drugi – jej wartość:

angular.module(‘nazwaModulu’).value('nazwa’,’wartość’);

Tą wartością może być liczba, tekst, obiekt lub nawet funkcja. W przypadku funkcji przyjmowałaby ona jeden argument i musiałaby zwracać jakąś wartość. Tworzona poniżej usługa value to w przybliżeniu zapis w JS: let czyZalogowany = true;. Utworzenie wartości wykonamy w kodzie z poprzedniego artykułu (kod aplikacji znajduje się pod adresem itwa.pl/js1) z wykorzystaniem istniejącego modułu o nazwie app. W pliku app.js dodajemy kod tworzący usługę:

angular.module('app', []); // utworzenie modułu
angular.module('app').value('czyZalogowany', true);


Następnie, w tym samym pliku, aby móc ją wykorzystać, wstrzyknijmy (inject) ją do kontrolera:


// poczatek tablicy,
angular.module('app').controller('appKontroler', [
'$scope', '$http', 'czyZalogowany',
//początek funkcji kontrolera
function ($scope, $http, czyZalogowany)
{

} // koniec funkcji kontrolera
] // koniec tablicy
); // koniec definicji controller

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej