LocalVan – angular 2 routing, czyli stan aplikacji

W dzisiejszej aktualizacji dochodzi podział aplikacji na widoki, czy też podstrony jak kto woli. Aplikacja którą tworzę, jest z założenia SPA (Single Page App), więc potrzebne będzie inteligentne narzędzie do zarządzania stanami aplikacji. Angular 2, podobnie jak w poprzedniej wersji zapewnia dedykowane rozwiązanie na potrzeby tego typu. Jeśli mogę wyrazić swoją opinię, to ku mojemu zaskoczeniu w nowej wersji wydaje się to jeszcze łatwiejsze mimo, iż zasada pozostaje ta sama.

Zaczniemy od upewnienia się, że mamy zainstalowaną odpowiednią paczkę z rodziny @angular, czyli router:

Jeżeli dodana została ręcznie do pliku package.json wystarczy przeinstalować od nowa moduły npm. (npm install/yarn)

Następnie w głównym module aplikacji należy przede wszystkim zaimportować moduły RouterModule oraz Routes. Zrobione? Tworzymy opis naszych „routes” (czyli z angielskiego: szlaki, drogi) mapując relatywny adres URL naszej aplikacji do odpowiednich komponentów. Wychodzi tutaj prostota tego narzędzia, ponieważ angular 2 po prostu podmienia wyświetlany komponent zależnie od tego jak wygląda obecny adres URL w naszej aplikacji. Dlatego też zwykle poszczegółne widoki (czy też ekrany) dobrze jest traktować jako komponenty. Ja dla przykładu układam je sobie w podfolderze „screens”. Dzięki temu zawsze wiem bez namysłu gdzie sięgnąć, jeżeli potrzebuje zmienić coś w temacie głównych widoków. Powyższe informacje podsumowuje następujący listing:

Oczywiście musimy też zaimportować poszczególne komponenty, o których wspomniałem przed chwilą. Jest jeszcze jeden ważny szczegół, bez którego powyższe zmiany nie będą miały efektu. Angular musi dokładnie wiedzieć, w którym miejscu może zajmować się dynamiczną podmianą widoków. W tym celu, podobnie zresztą jak w poprzedniej wersji, lecz pod inną nazwą, wskazujemy to miejsce wstawiając znacznik <router-outlet></router-outlet> To właśnie wewnątrz niego odbywać się będą wszelki zmiany.

Ale chwila! Jak poruszać się pomiędzy poszczególnymi widokami? W najprostszym przypadku można wykorzystać atrybut routerLink, który za wartość przyjmuje nazwę stanu, określoną w głównym module aplikacji po lewej stronie mapowań. (czyli adres url, nie nazwa komponentu).

Oczywiście nie użwamy atrybutów href. To spowoduje przeładowanie strony, a tego nie chcemy i nie potrzebujemy. Jest jeszcze drugi sposób, dzięki któremu można zmieniać stan aplikacji z poziomu javascript, ale zapewne będzie jeszcze okazja by to omówić. To by było na tyle. Wystarczy przekompilować projekt:

> tsc -p tsconfig.json

…i obserwować aplikację w akcji.

W tym tygodniu dokonałem jeszcze kilka drobnych zmian, ale te mniej interesujące szczegóły można z powodzenim śledzić w repozytorium projektu, do czego gorąco zachęcam!

W następnym kroku zajmę się rozwojem nowo dodanego widoku „Get Quotes”, który będzie służył do interakcji z użytkownikiem w zakresie wyszukiwania ofert.