Aplikacje webowe mogą szybko się rozrosnąć podczas tworzenia. Duża ilość danych i skomplikowana logika w kontrolerach powoduje, że może być ciężko wszystko uporządkować. Tutaj do akcji wchodzi routing w AngularJS. Dzięki tej technice, można dzielić widok na mniejsze ‚pod-widoki’. A co za tym idzie, możemy podzielić logikę na łatwe do przełknięcia kawałki.
Dziś kontynuacja mojej serii o Angularze dla początkujących (poprzednie wpisy tu oraz tu). Tym razem pokażę krótki skrypt przedstawiający routing. Skrypt ten nie będzie zawierał specjalnie skomplikowanej logiki 🙂 . Za to na pewno po lekturze tego wpisu będziecie znali podstawy potrzebne do dalszego rozwoju umiejętności programowania z pomocą AngularJS.
Jak działa routing?
W dużym uproszczeniu. Dzięki routingowi mamy możliwość wskazania miejsca w widoku aplikacji, którego zawartość będzie dynamiczna. Wskazane przez nas miejsce może, wedle potrzeby użytkownika, wyświetlać różny kod HTML. Przy tym, cała strony nie zostanie przeładowana. Dodatkowym atutem jest to, że zmiany w widoku, zmieniają również adres URL. Jest to rejestrowane przez przeglądarkę co pozwala np. na użycie przycisku cofnij.
Fragmenty HTMLa, które mają pojawiać się w aplikacji dynamicznie przechowywane są w osobnych plikach.
Routing w AngularJS – przykładowy kod
Ta prosta aplikacja ma na celu przedstawienie użytkowniki listy jego postaci z gry RPG. Po kliknięciu na imię postaci wyświetlą się szczegółowe informacje o danej postaci. Przez cały czas w aplikacji widoczny jest link prowadzący z powrotem do listy.
Przykład składa się z trzech plików index.html, charList.html oraz charInfo.html. Kod JS (który normalnie byłby umieszczony w osobnym pliku/plikach, ale to tylko mały przykład) znajduje się wewnątrz index.html.
Pliki charList.html oraz charInfo.html zawierają tylko widok dla Angulara. Są to fragmenty kodu html okraszonego odpowiednimi dyrektywami (atrybuty ng*) oraz interpolacją (podwójne nawiasy klamrowe). Przedstawię cały kod a następnie przejdę do tłumaczenia, co się tutaj dzieje.
Tak jak w poprzednich przykładach z Angularem, aby ten kod zadziałał musi być odpalony na serwerze.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html> <html> <head> <title>Angular Route - js.N00b jsdn.pl</title> <meta charset='utf-8'> <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script> <script type="text/javascript" src='https://code.angularjs.org/1.5.0-beta.1/angular-route.js'></script> <script type="text/javascript"> var model = { "Gerult": { name:"Gerult", characterClass:"Wojownik", level: 12, experience: 1200, statistics: { strength: 14, dexterity: 19, intelligence: 14, constitution: 14, charisma: 9, luck: 8 } }, "Druzzt": { name:"Druzzt", characterClass:"Zwiadowca", level: 8, experience: 800, statistics: { strength: 12, dexterity: 19, intelligence: 13, constitution: 13, charisma: 15, luck: 10 } }, "Conen": { name:"Conen", characterClass:"Barbarzyńca", level: 9, experience: 900, statistics: { strength: 20, dexterity: 12, intelligence: 8, constitution: 18, charisma: 7, luck: 13 } } }; var app = angular.module("characterSheet", ['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/showAllChars', { templateUrl: 'charList.html', controller: 'characterSheetControl' }). when('/showCharInfo/:charName', { templateUrl: 'charInfo.html', controller: 'characterSheetControl' }). otherwise({ templateUrl: 'charList.html', controller: 'characterSheetControl' }) }]); app.controller("characterSheetControl", function($scope, $routeParams){ $scope.characters = model; $scope.char_name = $routeParams.charName; }) </script> </head> <body data-ng-app="characterSheet"> <h1>Twoi poszukiwacze przygód</h1> <a href="#showAllChars">Lista postaci</a> <div data-ng-view class='appView'></div> </body> </html> |
charList.html
|
1 2 3 4 5 |
<ul> <li data-ng-repeat="character in characters"> <a data-ng-href="#showCharInfo/{{character.name}}">{{character.name}}</a> </li> </ul> |
charInfo.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<h3>{{char_name}}</h3> <h4>{{characters[char_name].characterClass}} poziomu {{characters[char_name].level}}, punkty doświadczenia: {{characters[char_name].experience}}</h4> <p>Statystyki:</p> <ul> <li>Siła: {{characters[char_name].statistics.strength}}</li> <li>Zręczność: {{characters[char_name].statistics.dexterity}}</li> <li>Inteligencja: {{characters[char_name].statistics.intelligence}}</li> <li>Wytrzymałość: {{characters[char_name].statistics.constitution}}</li> <li>Charyzma: {{characters[char_name].statistics.charisma}}</li> <li>Szczęście: {{characters[char_name].statistics.luck}}</li> </ul> |
Większość tego kodu powinna wyglądać znajomo dla tych, którzy czytali moje poprzednie wpisy o AngularJS. Pierwsza rzecz na która należy zwrócić uwagę, to nowy skrypt, który importuje do pliku w sekcji head dokumentu. Chodzi o angular-route.js. Jest to moduł wymagany do pracy z routingiem i należy ściągnąć go osobno ze strony angulara.
Następna rzecz, która jest nowa to zmiana w deklaracji modułu aplikacji. W tablicy zawierającej zależności aplikacji, musimy dodać moduł routowania. Przekazujemy tam po prostu łańcuch znaków o wartości ngRoute.
Kiedy moduł jest już gotowy, należy skonfigurować routowanie. Służy do tego metoda config modułu. Warto dobrze przyjrzeć się jej składni. jako argument przyjmuje ona tablicę zawierającą dwa elementy. Pierwszy to łańcuch znaków równy $routeProvider a drugi to anonimowa funkcja. Co ciekawe funkcja ta jako parametr przyjmuje obiekt o nazwie takiej samej jak wartość wspomnianego łańcucha znaków. Czyli $routeProvider. Obiektu tego używamy wewnątrz funkcji aby zdefiniować zachowanie routingu.
Tutaj znów warto bardzo dobrze przyjrzeć się składni. Na obiekcie $routeProvider wywoływane są metody oddzielone kropkami. Wygląda to podobnie jak chaining w jQuery.
Obiekt $routeProvider wywołuje dwie metody when oraz otherwise. Każde wywołanie when przyjmuje dwa parametry, pierwszy to łańcuch znaków. Łańcuch ten to atrybut href linka w widoku aplikacji. Jeżeli taki link zostanie kliknięty aplikacja wywoła event routowania zdefiniowany w tym when!
A jak zadziała ten event? O tym decyduje zawartość drugiego parametru metody when. Parametr ten to obiekt o dwóch polach templateUrl oraz controller. Po kliknięciu linka wywołującego routing, aplikacja dynamicznie wczyta do widoku zawartość pliku z adresu zdefiniowanego jako wartość pola templateUrl. Ten nowy element będzie miał automatycznie przypisany kontroler, którego nazwa zdefiniowana jest jako wartość pola controller.
Co do metody otherwise, przyjmuje ona tylko jeden parametr. Obiekt taki sam jak w drugim parametrze metody when. Jak łatwo się domyślić po nazwie metody, wywoła ona widok, wtedy gdy href klikniętego w aplikacji linka nie będzie równy żadnym tym zdefiniowanym w metodach when.
Zwrócę uwagę na jeszcze jedną rzecz, która bardzo przydaje się przy routingu. W drugim when obiektu $routeProvider, wartość pierwszego parametru wygląda tak ‚/showCharInfo/:charName’. Dwukropek oznacza dwie rzeczy. Pierwsza to taka, że niezależnie co zostanie wpisane w miejsce po nim. Wywołany zostanie widok przypisany linkowi /showCharInfo. Druga rzecz oznacza, że wartość wpisana w miejsce :charName zostanie przekazana jako wartość do obiektu $routeParams pod kluczem charName.
Obiekt $routeParams możemy następnie wykorzystać w kontrolerach aplikacji. Podobnie jak obiekt $scope musimy go tylko przekazać jako parametr podczas tworzenia kontrolera. Skoro już jestem przy kontrolerach, zaznaczę tylko, że w tym przykładzie wykorzystuje tylko jeden kontroler. W normalnej sytuacji dążylibyśmy do tego aby używać różnych kontrolerów do różnych widoków, w imię zasady, aby rozdzielać logikę pod widoki. To jest jednak tylko przykład, który ma pomóc w zrozumieniu mechanizmów routowania, dlatego chciałem aby był jak najmniej skomplikowany. (W niedalekiej przyszłości napiszę, jako projekt, większą aplikacje, w której która zaprezentuje w użyciu wszystko to co pisze o Angularze.)
Jak widać dalej, w kontrolerze aplikacji jedynie deklaruję $scope dodaje do niego model zdefiniowany wcześniej oraz przypisuję mu pole, które otrzymuje wartość parametru routingu.
Ostatnia rzecz w pliku index.html to dyrektywa w widoku. Div poniżej tytułu oraz linka prowadzącego do widoku pełnej listy, zawiera atrybut ng-view. To znak dla Angulara, że wszystkie widoki importowane przez routing mają znaleźć się tutaj.
I to właściwie wszystko. Można jeszcze przyjrzeć się zawartość plików zawierające „pod-widoki”. Lista postaci jest generowana w taki sposób że każdy z nich jest linkiem prowadzącym do szczegółowego widoku. Sprytnie przekazany parametr, równy imieniu postaci jest potem wykorzystywany przez aby przez scope dotrzeć do informacji na jej temat.
Jako ćwiczenie utrwalające, poleciłbym napisanie własnej aplikacji. Niech to będzie kolekcja danych, pogrupowana w jakiś sposób. Na przykład informacje o rowerach lub książkach jakie posiadamy. Aplikacja powinna posiadać co najmniej dwa widoki, podobnie do tego co przedstawiłem tutaj. Oprócz tego niech użytkownik posiada też możliwość edytowania informacji o elementach kolekcji. Możliwość dodawania nowych oraz usuwania obecnych. Jeśli uda Ci się napisać taką aplikację, gratuluję. Masz już konkretne fundamenty jeśli chodzi o AngularJS. Możesz śmiało wysyłać CV na frontendowca 😉 .
To na pewno nie koniec Angulara na moim blogu. Myślę, że i dla mnie przyszedł teraz czas na napisanie jakieś dużej aplikacji 🙂 Jeżeli chcesz być na bieżąco z tym co tu zamieszczam, zachęcam do polubienia mojej strony na facebooku. Jest ona bardzo często uaktualniana o najświeższe informacje.
Wielkie podziękowanie za znakomity opis problemu. Bardzo podoba mi się, że w Pana artykule nie ma skrótów myślowych tylko wszystko jest bardzo dokładnie opisane.Dobry język to połowa sukcesu.
P.S.
Dzięki temu artykułowi wdrożyłem swój pierwszy routing w oparciu o AngularJS. Dziękuję.