Akkurat nå er oppgaveverktøyet vårt 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 navigering skjer ved å bytte innhold underveis.

Det er raskt og brukervennlig, 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 oppgavebehandler 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 inn siden på nytt. I bakgrunnen er det fortsatt den samme HTML-filen, men innholdet byttes ut dynamisk. For brukeren føles det som om de navigerer på et tradisjonelt nettsted, men alt håndteres inne i SPA-en.

Enkelt sagt lar ruting oss fortelle applikasjonen:

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

Hvordan ruting fungerer i Angular

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

For vår oppgavebehandler gir routing oss mye fleksibilitet:

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

• Naviger uten å laste siden på nytt — 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-IDer eller filtre (/tasks?status=done);

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

• Beskyttede ruter — for eksempel kreve at brukeren 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, og tar seg automatisk av navigasjon og visning.

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