Servis $route služi za izmjenu view-a svaki puta kada izmjenimo URL.
Budući da je Angular one-page-app onda prilikom routinga mora ostati stranica ista.
Kako bi stranica ostala ista mora se dodati hash znak # te onda iza njega mijenjati URL.
Npr. , http://localhost/index.html#/prvastranica .
U praksi ovo znači da jednu veliku aplikaciju možemo razdijeliti u zasebne view fajlove (layoute)
koje ćemo kasnije preko URL-a prema potrebi uključivati u main layout. Na ovaj način se code čini
preglednijim i lakšim za održavanje.
Dakle, routing pomaže da se velika aplikacija razdjeli u više logičkih view-ova i da se onda
svaki taj view poveže sa svojim kontrolerom.
Primjer:
pokreni primjer
» main layout 50route_index.html CODE
» 1. layout 50route_popis.html CODE
» 2. layout 50route_greska.html CODE
Route princip rada
Da bi route radio potrebno je definirati i pripaziti na nekoliko stvari:
1. Definirati main layout i pomoćne layoute
Main layout je onaj osnovni fajl koji se neće mijenjati u URL-u (one-page-app), npr.
http://localhost/50route_index.html
Promjenom URL-a iza hash znaka (#) u main layout će se injektirati pomoćni layout fajlovi, npr.
http://localhost/50route_index.html#/popis injektira 50route_popis.html u 50route_index.html
http://localhost/50route_index.html#/greska injektira 50route_greska.html u 50route_index.html
Svaki layout je template i može sadržavati svoje bind varijable {{var}} koje dolaze iz određenog kontrolera.
Svaki layout može imati svoj zaseban kontroler ili može više layouta dijeliti isti kontroler. Znači iz pojedini kontrolera
iz modela šalje varijable u određeni layout.
2. ng-view
U main layoutu sa ng-view definirati područje učitavanja ostalih route layouta. Unutar glavnog layouta može se naći samo jedna ng-view direktiva, što je i logično jer ne mogu istodobno postojati dva URL-a za jednu stranicu u address baru browsera. Dakle, ng-view je vezan za URL u browserovom address baru.
3. angular-route.min.js
Osim fajla angular.min.js mora se dodatno učitati i angular-route.min.js. Nakon verzije 1.1.6 Angular ne sadrži ngRoute unutar angular.min.js nego je to zaseban fajl. Zato ga moramo uključiti sa npr.
Iz istoga razloga potrebno je definirati modul sa dependency injectorom ['ngRoute'].
U protivnom će u JS konzoli javiti grešku
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org...
4. definirati routes
Svakom URL-u treba se definirati zaseban pomoćni layout i controller.
Ukoliko ima jako mnogo routes-a dobro je to spremiti u zaseban fajl, npr. my_routes.js.
Zamijetiti sintaxu when , otherwise.
5. definirati controllere
U main layoutu potrebno definirati i kontrolere koje smo naveli definirajući routese. Unutar kontrolera nalaze se modeli čiji podaci se šalju u pripadajuće layoute definirane sa temlateUrl.
URL parametri
U gornjem primjeru vidjeli smo kako se u main layout preko URL-a može injektirati neki drugi HTML template tj. pomoćni layout.
Često puta je osim injektiranja pomoćnog layout fajla u main layout potrebno URL-om poslati i određene varijable (parametre), npr.
http://localhost/index.html#/popis/3 , gdje je 3 neki parametar.
U route parametar se označava sa dvotočkom npr: :orderId,
a u kontroleru se nakon toga poziva sa $routeParams.orderId.
Primjer:
pokreni primjer
» main layout 51route_url_params.html CODE
» 1. layout 51route_popis.html CODE
$routeProvider.template svojstvo
U prethodnim primjerima smo vidjeli da se pomoćni layout (HTML template) može staviti
u zaseban fajl.
Pomoću svojstva template moguće je definirati template unutar Javascripta. To je obično za manje template-ove.
Primjer pokazuje upotrebu template-a iz JS-a:
pokreni primjer
» HTML+JS code
$routeProvider.redirectTo svojstvo
Pomoću svojstva redirectTo preusmjeravamo sa jednog hash URL-a na neki drugi hash URL.
Primjer pokazuje upotrebu redirectTo svojstva:
pokreni primjer
» HTML+JS code
Dodavanje vlastitih varijabli u $routeProvider
Osim predefiniranih svojstava $routeProvider objektu možemo kreirati i proizvoljno svojstvo.
Nakon toga svojstvu se unutar controllera pristupa pomoću $route.current.mojesvojstvo .
Primjer:
pokreni primjer
» main layout 52route_custom_routeprovider.html CODE
» 1. layout 52route_ispis.html CODE