Routing

Útvonalválasztó mechanizmus

A routing segítségével navigálhatunk az alkalmazásban különböző oldalak között, az URL-ekhez rendelve specifikus komponenseket és funkcionalitásokat. Az angular hozzá rendeli a megfelelő komponens hierarchiát. A komponens megszerzi ajax kéréssel az adatokat szerver oldalról majd kirenderel valamilyen tartalmat.

A Routing tulajdonképpen egy tömb, amiben objektumelemek vannak.

A path és a komponensen túl megadhatunk guardokat (canActivate, canDeactivvate), resolvereket, egyéb adatokat.

const routes: Routes = [
  {path: "", component: CimlapComponent},
  {path: "albumok", component: AlbumListaComponent},
];

Angularban az útvonalak (routes) konfigurációjában többféle beállítást adhatunk meg, hogy meghatározzuk, hogyan működjenek az útvonalak és milyen komponenseket jelenítsenek meg. A leggyakrabban használt beállítások a következők:

1. path: Egy string, amely meghatározza az URL részletét ehhez az útvonalhoz. Például: 'products' az /products URL-hez kapcsolódik.
2. component: A komponens, amelyet meg kell jeleníteni, amikor az adott útvonal aktív.
3. redirectTo: Egy másik útvonalra való átirányítás. Használható például az alapértelmezett útvonal beállításához.
4. pathMatch: Hogyan hasonlítsa össze az útvonalat az URL-lel, ha a redirectTo be van állítva. Az értékek lehetnek 'full' vagy 'prefix'.
5. children: Egy másik Routes tömb, amely almódosított útvonalakat tartalmaz. Ezzel létrehozhatunk beágyazott útvonalhierarchiákat.
6. loadChildren: Lazy loadinghoz használható. Megadja a modult, amelyet dinamikusan kell betölteni, amikor az útvonal aktív.
7. data: Egy objektum, amely tetszőleges adatokat tartalmaz, amelyeket az útvonalhoz kapcsolódóan szeretnénk tárolni. Gyakran használják például az útvonal címének vagy jogosultságainak tárolására.
8. resolve: Egy vagy több resolver definíciója, amelyek előre betöltenek adatokat az útvonalhoz kapcsolódó komponens számára.
9. Guard: canActivate és canDeactivate: megadhatják, hogy egy adott útvonalra navigálhatunk-e vagy elhagyhatjuk-e azt.
10. runGuardsAndResolvers: Megadja, hogy mikor futnak le a guard-ok és resolverek egy útvonalon. Értékei lehetnek: 'paramsChange', 'paramsOrQueryParamsChange', 'pathParamsChange', 'always', vagy 'pathParamsOrQueryParamsChange'.

Ezen tulajdonságok bármely kombinációját használva finoman szabályozhatjuk az útvonalak működését és a navigációt az Angular alkalmazásunkban.

Router outlet

A router-outlet egy direktíva, amely a routing során az aktuális komponenst helyettesíti az alkalmazásban, a megfelelő modulhoz és URL-hez rendelve.

canActivate vs canLoad

A canActivate az útvonal megnyitásakor ellenőrzi, hogy a felhasználó hozzáférhet-e a komponenshez, míg a canLoad az útvonal betöltése előtt ellenőrzi, hogy a felhasználó hozzáférhet-e a modulhoz.