Uvod
Angular aplikacije su danas vrlo česte. Izgrađene su na konceptu jednostraničnih aplikacija (SPA). U takvim aplikacijama, usmjeravanje kroz web stranice razlikuje se od tradicionalnih web stranica jer se koriste komponente. U Angularu morate koristiti RouterLink za navigaciju radi usmjeravanja kroz aplikaciju. RouterLink je direktiva i pruža Router.navigate i Router.navigateByURL metode za navigaciju kroz klase komponenti.
U ovom vodiču ćemo proučiti RouterLink, Router.navigate, i Router.navigateByURL zajedno s kodnim primjerima.
RouterLink
U HTML-u se poveznica obično umeće pomoću sidrene oznake <a> kao u nastavku:
|
1 2 3 |
<a href="/sample"> Primjer HTML poveznice. </a> |
Ova primjerna poveznica odvest će korisnika na /sample stranicu. Međutim, kao što je gore spomenuto, jednostranična aplikacija (SPA) nema različite stranice na koje bi se povezivala. Umjesto toga, ima različite prikaze ili komponente koje prikazuje korisniku.
Ako trebate omogućiti korisniku navigaciju i promjenu prikaza, morat ćete koristiti RouterLink direktivu umjesto href:
|
1 2 3 |
<a routerLink="/users/example"> Poveznica koja koristi niz znakova. </a> |
Ovaj RouterLink primjer odvest će korisnika na komponentu na /users/example. Različiti URL segmenti također se mogu proslijediti u polju kao u sljedećem primjeru:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Jedan primjer poveznice s jednim poljeman array. </a> |
Ova dva primjera formatirana su na različit način, ali će i dalje voditi do iste komponente na /users/example.
-
Relativna putanja
RouterLink omogućuje navođenje relativnih URL-ova. Možemo koristiti ../ za odlazak na više razine navigacije. U nastavku je prikazano kako to možemo postići:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Poveznica koja ide jednu razinu gore. </a> |
U gornjem primjeru, ako se korisnik nalazi na /users/posts, navigacija će odvesti korisnika na /posts/parent. Također možete specificirati URL-ove relativno koristeći ./, ../, ili čak bez početne kose crte ako je potrebno.
-
Parametri
Mogu postojati scenariji u kojima trebate prenijeti podatke između ruta. Jednostavan primjer je kada korisnik ispuni obrazac, a vi ga odvedete na sljedeći dio obrasca za daljnje pojedinosti.
Za prosljeđivanje parametara, objekt koji enkapsulira podatke prosljeđuje se u popisu URL segmenata:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Poveznica s parametrom. </a> |
Gore, Router će navigirati na /users;display=sample/xyz.
-
Imenovani izlazi
Imenovani izlazi usmjerivača su jednostavno izlazi usmjerivača s nazivima. Pogledajmo kod za to:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Poveznica s bočnim izlazom. </a> |
U tom primjeru, xyz segment bit će smješten u izlaz pod nazivom side. Također možemo specificirati više imenovanih izlaza kao u nastavku:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Poveznica s prvim i drugim izlazom. </a> |
Ovo će zamijeniti first segment s abc a second segment se zamjenjuje s xyz.
Router
U Angularu, Router klasa se koristi za definiranje ruta i za navigaciju kroz njih. To se postiže pomoću dvije metode: Router.navigate i Router.navigateByUrl. Obje ove metode vraćaju obećanje. Ovo obećanje može imati tri vrijednosti: true, false, ili null.
-
Vrijednost je true kada je navigacija uspješna.
-
Vrijednost je null kada nema navigacije.
-
I false ako iz nekog razloga navigacija ne uspije.
Ako želite imati ove metode dostupne u svojoj aplikaciji, najprije morate uvesti Router klasu u klasu svoje komponente:
|
1 |
import { Router } from '@angular/router'; |
Zatim trebate ubrizgati ovaj Router u konstruktor među ovisnosti:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
S ovom postavkom spremni ste za korištenje Router.navigate i Router.navigateByUrl metoda u svojoj aplikaciji.
Router.navigate
Metoda Router.navigate prihvaća niz segmenata URL-a. Pogledajmo osnovni primjer Router.navigate koda:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Na kraju, pogledajmo Router.navigateByUrl. Ova metoda je slična metodi Router.navigate ali umjesto prihvaćanja segmenata URL-a, prihvaća niz znakova koji specificira URL. Ova navigacija mora biti apsolutna i mora imati / na svom početku:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Gornji kod će navigirati korisnika na /users;all=true stranicu.
Zaključak
U ovom vodiču smo pogledali kako navigirati u Angular aplikacijama pomoću RouterLink-a. Usmjeravanje u Angular aplikacijama malo je drugačije od tradicionalnih web aplikacija jer se radi o aplikacijama s jednom stranicom. Poznavanje RouterLink-a i njegovih funkcija može pomoći razvojnim programerima u izgradnji robusnog usmjeravanja.
Angular aplikacije koriste Node.js kao svoje okruženje za izvršavanje. Ako želite saznati više o Node.js-u i kako implementirati Node.js aplikacije, možete pogledati sljedeće vodiče:
- Kako instalirati Node.js na Ubuntu 18.04
- Postavljanje Node.js aplikacija: Kako izvršiti produkcijske zadatke na Ubuntu 20.04 s Node.js-om
- Kako implementirati Node.js (Express.js) aplikaciju s Dockerom na Ubuntu 20.04
Sretno programiranje!
Komentari
Još nema komentara. Budite prvi.