Prolog
Ten wpis nie będzie niczym odkrywczym dla osób mających duże doświadczenie z Angularem. Jednak podstawowa wiedza o routingu jest zalecana w lekturze tego posta Jest on usystematyzowaniem wiedzy na temat, jak działa routing, w postaci prostego przykładu. Jest tym, co sama chciałabym zobaczyć na początku swojej angularowej przygody.
Przygotowałam plunkry obrazujące różne możliwości dwóch sposobów routingu dostępnych w Angularze. Moje przykłady to wariacja tutoriali z blogów amasik oraz websystique.
Routing w Angularze
Dla osób niewtajemniczonych – zdanie wprowadzenia. Istnieją dwa moduły dostarczające narzędzia do routingu w Angularze:
ngRoute:
– pierworodna, podstawowa metoda;
– routing bazuje na adresach URL;
– polega na tym, że mamy jeden kontener, w którym możemy żonglować różnymi widokami (dla jasności 1 kontener może pokazać tylko 1 widok);
– zalecana do mniejszych projektów;
ui.router:
– opcjonalnie możemy ją zaimportować;
– routing bazuje na stanach;
– daje możliwość tworzenia wielu zagnieżdżonych kontenerów, których widokami możemy sobie żonglować (tak samo 1 kontener może pokazać tylko 1 widok);
– zalecana do złożonych projektów.
Nie będę rozpisywać się o podstawach, które możecie przeczytać na tryliardzie innych stron w sieci. Polecę za to gorąco ogromną tabelkę, znalezioną również na blogu amasik, szczegółowo porównującą dwa moduły: TU
A teraz do przykładów!
ngRoute – przykład
Pierwszy plunkr to przykład użycia modułu ngRoute. Menu pojawia się na każdej z podstron, jest poza kontenerem ng-view. Z kolei w kontenerze ng-view pojawiają się (przynajmniej powinny) zawartości, treści poszczególnych zakładek. No właśnie, zakładki:
Business – jej treść zdefiniowana jest przez własność „templateUrl” podającą oczywiście link do templatu. W zakładce jest podmenu z dwoma linkami prowadzącymi do innych zakładek. Ostrzeżenie poniżej mówi, że nie zagnieździmy więcej widoków w naszym kontenerze. Nie zrobimy kolejnych modułów pojawiających się po kliknięciu w jakąś opcję podmenu.
Portfolio – jej treść zdefiniowana jest również przez własność „templateUrl”. W zakładce są dwa panele, które sztucznie wywołują wrażenie dwóch widoków. Ostrzeżenie to samo, co w poprzedniej zakładce.
About – jej treść jest wpisana we własność „template”. W zakładce jest prosta wiadomość. Dłuższe treści umieszczamy oczywiście w osobnych plikach, ładnie pokatalogowanych, a następnie odwołujemy się do nich przez „templateUrl”
A – każda zakładka do inny URL.
ui.router – przykład
Drugi plunkr to przykład użycia modułu ui-router. Menu pojawia się na każdej z podstron, jest poza kontenerem ui-view. Z kolei w kontenerze ui-view
Business – jej treść zdefiniowana jest przez własność „templateUrl”. W zakładce jest podmenu z dwoma linkami prowadzącymi do…. (werbel)… dwóch 'podwidoków’! Ich treść też jest zdefiniowana w inncyh templatach. Włączenie każdego z nich zmienia URL. Zwróćcie uwagę na sposób dobrania się się do tych podwidoków w pliku app.js oczywiście (linia 12 i 19).
Portfolio – jej treść zdefiniowana jest również przez własność „templateUrl”. W zakładce również są zagnieżdżone dwa inne 'podwidoki’, jednak są one cały czas widoczne. W żaden sposób nie zmieniają adresu URL. Są one zdefiniowane w zupełnie odmienny sposób niż przy poprzedniej zakładce. Znowu polecam zerknąć do app.js (linie 28-36). Treść pierwszego zdefiniowana jest „na sztywno” we własności „template”, drugiego – w osobnym pliku, osadzona we własnośco „templateUrl”.
About – jej treść jest wpisana we własność „template”. W zakładce jest prosta wiadomość.
Epilog
Źródło niewymienione wyżej dla rządnych wiedzy KLIK!
P.S. Nie bądźcie źli, że piszę po polsku, a plunkr jest po angielsku – nie, nie wynika to z mojego lenistwa Po prostu artykuł jest dla wszystkich błądzących, i nie tylko, ale zawsze polskich programistów, bo do Was piszę A plunkr…? Po pierwsze plnkr.co to taka międzynarodowa baza wiedzy, egoizmem byłoby pisanie po polsku. Po drugie – bądźmy szczerzy. Kto z Was programuje po polsku?? Grzechem jest kodowanie w innym języku niż angielski… To tak wg mnie
