Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Grunderna i Routing i Angular | Routing and Navigation in Angular
Introduktion till Angular

bookGrunderna 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?

Note
Definition

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?

question mark

Vad gör routing i en Angular-applikation?

Select the correct answer

question mark

Vad är en SPA i Angular-sammanhang?

Select the correct answer

question mark

Vilken roll har RouterModule i Angular?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 1

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

bookGrunderna 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?

Note
Definition

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?

question mark

Vad gör routing i en Angular-applikation?

Select the correct answer

question mark

Vad är en SPA i Angular-sammanhang?

Select the correct answer

question mark

Vilken roll har RouterModule i Angular?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 1
some-alt