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

Ścieżka:

Strona główna » Artykuł »

Paweł Ziółkowski

Komponenty w AngularJS

Od wersji 1.5 w AngularJS są dostępne komponenty – ciekawe rozwiązanie, które ułatwia pracę programisty oraz pozwala na powtórne wykorzystanie kodu. W Angularze 2 i 4 komponenty stanowią podstawowy składnik aplikacji.

Dzięki komponentom możemy podzielić naszą stronę na części i każdą z nich zarządzać osobno – przypisać osobny kontroler oraz osobny plik HTML dla każdej z nich, przez co praca z kodem będzie wygodniejsza. Dodatkowo utworzony komponent możemy łatwiej wykorzystać w innych aplikacjach, a użycie go będzie wiązało się z dodaniem odpowiedniego znacznika do kodu HTML.

Dokumentacja frameworka dotycząca komponentów informuje, że oferują one dwie ważne korzyści: ponowne użycie kodu oraz przypisywanie zmiennych tylko do części strony, a nie do całości. W dużym projekcie liczącym kilkaset linii kodu można zapomnieć, że np. zmienna $scope.pole została już wykorzystana i jeśli omyłkowo zmienimy jej wartość w innym miejscu aplikacji, doprowadzi to do pojawienia się błędów. Innym ułatwieniem jest czytelność kodu, ponieważ użycie komponentu w HTML sprowadza się do dodania własnego tagu, np. lista-uczniow. Oczywiście, wcześniej to programista musi określić, czym jest ta lista-uczniow i jak ma się zachowywać. Może również wskazać, czy komponent będzie przyjmował jakieś wartości lub generował zdarzenia. Utworzony komponent ma być czarną skrzynką, która wiadomo, co robi, co przyjmuje i co może z siebie wyrzucić, czyli udostępnia tylko swoje API.

Porządek w projekcie

Przed wprowadzeniem komponentów do naszej aplikacji uporządkujmy nasz projekt, który był tworzony w poprzednich artykułach o AngularJS publikowanych na łamach „IT w Administracji”.

Usuńmy z pliku app.js linijkę z tworzenia modułu: angular.module('app', []); i przenieśmy ją do nowego pliku app-module.js. Nowy plik należy podlinkować na głównej stronie index.html, koniecznie przed plikiem app.js, w którym będziemy korzystać z utworzonego modułu:

<script src="/js/app-module.js"></script>

W taki sam sposób usuńmy usługi – value, factory, service. Po umieszczeniu ich w pliku app-services.js dołączmy go do pliku index.html – po app-module.js, ponieważ wykorzystujemy w nim moduł, ale przed app.js – tam jest kontroler, do którego wstrzykujemy usługi z tego pliku.

Po stronie serwera w pliku index.js zmieniamy metodę HTTP przy wysyłaniu tablicy uczniów z POST na GET – zmiana ta wynika z zasady, że przy pobieraniu danych używamy metody GET, natomiast przy zmianie danych (dodawaniu, aktualizacji) – metody POST. Poprawna metoda musi zostać również dodana w fabryce po stronie klienta w pliku app-services.js:

return $http({
method: "GET",
url: "/Uczen"

Pierwszy komponent

Dokumentacja dla typu Module (itwa.pl/9t) podaje, że utworzenie komponentu wymaga wywołania metody component() na utworzonym wcześniej module. Pierwszym parametrem jest jego nazwa zapisana stylem camelCase. Taki zapis będzie tłumaczony przez framework na element HTML z wykorzystaniem myślnika, kebab-case (podobnie jak z dyrektywami, np. ngRepeat na ng-repeat w kodzie HTML). Drugim parametrem jest obiekt, którego właściwości wyszczególnione są w dokumentacji. Najważniejsze z nich to controller, templateUrl, bindings. Kod przykładowego komponentu z pliku aktualnyCzas.js wygląda tak:

angular.module('app').component('aktualnyCzas',
{ //początek 2 argumentu, obiekt z opcjami
// pierwsza właściwość obiektu
controller: function() {
this.data = new Date().toLocaleDateString();
},
// po przecinku dodajemy drugą właściwość
templateUrl: '/js/components/data/aktualnyCzas.html'
} // koniec 2 argumentu
);

W powyższym kodzie pobieramy utworzony wcześniej moduł (brak drugiego argumentu, czyli tablicy w funkcji module) o nazwie app i na nim wywołujemy metodę component. Pierwszy argument tej metody to nazwa tworzonego komponentu, drugi to obiekt – opcje komponentu. Pierwsza właściwość tego obiektu to ‘controller’, czyli funkcja, która będzie obsługiwała logikę komponentu.

[...]

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