Grunderna i Routing i Angular
Just nu är vår uppgiftsspårare en enkel Single Page Application (SPA). Den laddas alltid från samma adress i webbläsaren (localhost:4200
) och visar alltid samma innehåll, oavsett vad.
Men vi vill ta det ett steg längre — genom att låta användare navigera till olika sektioner av appen med hjälp av URL:er som /task/1
, /settings
eller /analytics
. Vid navigering mellan dessa URL:er ska sidan inte laddas om — istället ska endast innehållet uppdateras dynamiskt inom samma webbläsarfönster.
Detta tillvägagångssätt definierar en SPA (Single Page Application) — hela applikationen laddas en gång, och all vidare navigering sker genom att innehållet byts ut dynamiskt.
Det är snabbt och användarvänligt, men kräver ett dedikerat system som förstår hur olika URL:er ska hanteras. Det är här routing kommer in.
Vad är routing?
Routing är mekanismen som styr navigering mellan olika vyer eller skärmar i din applikation. Det låter dig definiera vilken komponent som ska visas för en given URL.
I vår uppgiftshanterare kan vi ha olika sektioner som en uppgiftslista och en detaljsida för uppgifter. Till exempel:
-
När användaren navigerar till
/tasks
, vill vi visa en komponent med en lista över uppgifter; -
När de går till
/tasks/42
, vill vi visa detaljerna för uppgiften med ID 42.
Angular läser den aktuella URL:en och avgör vilken komponent som ska visas — allt utan att sidan laddas om. I bakgrunden är det fortfarande samma HTML-fil, men innehållet byts ut dynamiskt. För användaren känns det som att de navigerar på en traditionell webbplats, men allt hanteras inom SPA:n.
Enkelt uttryckt låter routing oss tala om för applikationen:
"Om användaren går till /tasks
, visa TaskListComponent
. Om de går till /tasks/42
, visa TaskDetailsComponent
."
Hur routing fungerar i Angular
Angular tillhandahåller ett inbyggt verktyg som heter RouterModule
som gör det enkelt att hantera navigering mellan vyer.
För vår uppgiftsspårare ger routing oss mycket flexibilitet:
-
Definiera rutter — till exempel, koppla sökvägen
/tasks
till en komponent som visar alla uppgifter; -
Navigera utan omladdning — gå till
/tasks/15
och se direkt detaljerna för uppgift 15; -
Visa olika komponenter baserat på URL — såsom en uppgiftslista, ett formulär för ny uppgift eller inställningar;
-
Använda route-parametrar — som uppgifts-ID eller filter (
/tasks?status=done
); -
Skapa nästlade rutter — till exempel användarinställningar inuti en profilsida (
/profile/settings
); -
Skydda rutter — som att kräva att användare är inloggade för att komma åt
/settings
.
I praktiken definierar du bara en uppsättning regler: vilken sökväg som ska ladda vilken komponent. Angular hanterar resten, inklusive navigation och rendering automatiskt.
Ur användarens perspektiv fungerar allt precis som en vanlig webbplats — de kan klicka på länkar, använda webbläsarens bakåt- och framåtknappar och till och med dela direkta länkar till specifika vyer i appen.
1. Vad gör routing i en Angular-applikation?
2. Vad är en SPA i Angular-sammanhang?
3. Vilken roll har RouterModule
i Angular?
Tack för dina kommentarer!