Akkurat nå er oppgaveoversikten vår en enkel Single Page Application (SPA). Den lastes alltid fra samme adresse i nettleseren (localhost:4200) og viser det samme innholdet, uansett hva.

Men vi ønsker å ta det et steg videre — ved å la brukerne navigere til ulike seksjoner av appen ved å bruke URL-er som /task/1, /settings eller /analytics. Når man navigerer mellom disse URL-ene, skal ikke siden lastes på nytt — kun innholdet skal oppdateres dynamisk i samme nettleservindu.

Denne tilnærmingen definerer en SPA (Single Page Application) — hele applikasjonen lastes én gang, og all videre navigasjon skjer ved å bytte innhold underveis.

Dette gir rask og brukervennlig opplevelse, men krever et dedikert system som forstår hvordan ulike URL-er skal håndteres. Det er her routing kommer inn.

Hva er routing?

I vår oppgaveoversikt kan vi ha ulike seksjoner som en oppgaveliste og en detaljside for oppgaver. For eksempel:

• Når brukeren navigerer til /tasks, ønsker vi å vise en komponent med en liste over oppgaver;

• Når de går til /tasks/42, ønsker vi å vise detaljene for oppgaven med ID 42.

Angular leser den gjeldende URL-en og bestemmer hvilken komponent som skal vises — alt uten å laste siden på nytt. I bakgrunnen er det fortsatt den samme HTML-filen, men innholdet byttes ut dynamisk. For brukeren føles det som å navigere på et tradisjonelt nettsted, men alt håndteres inne i SPA-en.

Enkelt sagt lar routing oss fortelle applikasjonen:

"Hvis brukeren går til /tasks, vis TaskListComponent. Hvis de går til /tasks/42, vis TaskDetailsComponent."

Hvordan routing fungerer i Angular

Angular tilbyr et innebygd verktøy kalt RouterModule som gjør det enkelt å håndtere navigasjon mellom visninger.

For vår oppgaveoversikt gir routing oss mye fleksibilitet:

• Definer ruter — for eksempel, koble stien /tasks til en komponent som viser alle oppgaver;

• Naviger uten omlasting — gå til /tasks/15 og se detaljene for oppgave 15 umiddelbart;

• Vis ulike komponenter basert på URL — som en oppgaveliste, et skjema for ny oppgave eller innstillinger;

• Bruk ruteparametere — som oppgave-ID-er eller filtre (/tasks?status=done);

• Lag nestede ruter — for eksempel brukerinnstillinger inne i en profilseksjon (/profile/settings);

• Beskyttede ruter — for eksempel kreve at brukere er innlogget for å få tilgang til /settings.

I praksis definerer du bare et sett med regler: hvilken sti som skal laste hvilken komponent. Angular håndterer resten, inkludert navigasjon og visning automatisk.

Fra brukerens perspektiv fungerer det akkurat som et vanlig nettsted — de kan klikke på lenker, bruke nettleserens tilbake- og fremoverknapper, og til og med dele direkte lenker til bestemte visninger i appen.