Angular JS: routing, struktura aplikacji – część 7

Cały dzisiejszy wpis chciałbym poświęcić problemowi routingu w Angular JS. Na przykładzie naszego systemu (DEMO) widzimy, iż dobrze byłoby dodać możliwość wyświetlania podstron – osobnej strony dla postów i osobnej strony dla użytkowników. I właśnie tym zajmiemy się poniżej, korzystając z dobrodziejstwa modułu ngRoute.

Samo dodanie moduług ngRoute umożliwiającego tworzenie podstron i nawigację pomiędzy nimi nie gwarantuje sukcesu. Nadszedł czas, gdy musimy przemyśleć schemat naszej aplikacji, strukturę plików i modułów. Poniżej prezentuję schemat zaproponowanych zmian:

wraz z opisem przeznaczenia poszczególnych plików:

 js/controllers/postsController.js  Obsługa widoku postów
js/controllers/usersController.js  Obsługa widoku użytkowników
js/services/api.js  Usługa łącząca system z API
js/app.js  Skrypt agregujący wszystkie moduły systemu
js/navigation.js  Usługa nawigacji (routingu)
views/partials/posts.html  Widok postów
views/partials/users.html  Widok użytkowników
views/partials/main.html Widok powitalny
views/index.html   Główny widok aplikacji

Jak widzimy nasza aplikacja przeszła małą metamorfozę. Zacznijmy od widoków:

index.html:

W naszym głównym widoku aplikacji dodaliśmy wszystkie skrypty JS, w znaczniku html dodaliśmy nasz główny moduł ourApp, (o którym więcej w pliku app.js). Widzimy również linki mające za zadanie prowadzić do kolejno postów i użytkowników.

Na samym końcu za pomocą znacznika div i klasy ng-view zdefiniowaliśmy miejsce, w którym mają być umieszczane zrenderowane wyniki pracy kontrolerów. Oznacza to, iż po wybraniu posts lub users system ma za pomocą odpowiedniego kontrolera i widoku częściowego utworzyć kod html, który zostanie osadzony właśnie w tej warstwie.

view/partials/posts.html

view/partials/users.html

Oba widoki są trywialne, więc nie będę zagłębiał się w ich opis. Przejdźmy do kodu JS:
js/services/api.js:

Jak widzimy na załączonym kodzie tworzymy moduł o nazwie api, który zawiera dwie usługi – posts i users. Jak się można domyślić, będą odpowiadały za pobranie postów i użytkowników – o samej usłudzie resource można poczytać w wcześniejszych wpisach.

Dwa kolejne skrypty JS to kontrolery:

js/controllers/postsController.js:

js/controllers/usersController.js:

Jak widzimy, podstawową i jedyną funkcją obu kontrolerów jest pobranie z usługi api odpowiednich danych, po czym przekazanie ich do widoku.

Do omówienia pozostały nam dwa skrypty, zacznijmy od tego bardziej ogólnego:
js/app.js

Główną funkcją naszego skryptu app.js jest agregacja wszystkich modułów systemu w moduł będący korzeniem aplikacji. W tym celu stworzyliśmy moduł ourApp i dodaliśmy dwa wykorzystane w aplikacji moduły:
– api
– ourApp.navigation

W ten sposób mamy korzeń naszej aplikacji, użyty bezpośrednio w głównym widoku index.html.

Na sam koniec zostawiłem najważniejszy skrypt dzisiejszego odcinka. W pliku navigation.js zdefiniujemy moduł nawigacji, a także podamy możliwe opcje routingu naszej aplikacji:

Moduł nawigacji, przy użyciu ngRoute definiuje, co ma wydarzyć się w momencie gdy użytkownik wybierze konkretny adres, w przypadku domyślnego adresu ‚/’ nastąpi wywświetlenie pustego pliku main.html. W przypadku /posts zostanie użyty widok posts.html z kontrolerem PostsController.

Aplikacja użyje kontrolera PostsController, który wygeneruje treść wstrzykniętą do widoku posts.html, a przy tym całość zostanie umieszczona w pliku index.html w znaczniku <ng-view></ng-view>. Taki system szablonów znacznie ułatwia pracę.

Jak widać, niniejszy wpis miał w dużej części zająć się routingiem, a w praktyce jego większość opisuje strukturę aplikacji angularowej wraz z niezbędnymi zależnościami.

 

DEMO
Kod Źródłowy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *