Lige nu er vores opgavesporingsværktøj en simpel Single Page Application (SPA). Den indlæses altid fra den samme adresse i browseren (localhost:4200) og viser det samme indhold, uanset hvad.

Men vi ønsker at tage det et skridt videre — ved at give brugerne mulighed for at navigere til forskellige sektioner af appen ved hjælp af URL'er som /task/1, /settings eller /analytics. Når der navigeres mellem disse URL'er, bør siden ikke genindlæses — i stedet skal kun indholdet opdateres dynamisk i det samme browservindue.

Denne tilgang definerer en SPA (Single Page Application) — hele applikationen indlæses én gang, og al efterfølgende navigation sker ved at udskifte indholdet dynamisk.

Det er hurtigt og brugervenligt, men det kræver et dedikeret system, der forstår, hvordan forskellige URL'er skal håndteres. Det er her, routing kommer ind i billedet.

Hvad er routing?

I vores opgave-tracker kan vi have forskellige sektioner såsom en opgaveliste og en side med opgavedetaljer. For eksempel:

• Når brugeren navigerer til /tasks, ønsker vi at vise en komponent med en liste over opgaver;

• Når de går til /tasks/42, ønsker vi at vise detaljerne for opgaven med ID 42.

Angular læser den aktuelle URL og beslutter, hvilken komponent der skal vises — alt sammen uden at genindlæse siden. Bag kulisserne er det stadig den samme HTML-fil, men indholdet udskiftes dynamisk. For brugeren føles det som om, de navigerer på et traditionelt website, men alt håndteres inde i SPA'en.

Kort sagt giver routing os mulighed for at fortælle applikationen:

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

Sådan fungerer routing i Angular

Angular tilbyder et indbygget værktøj kaldet RouterModule, der gør det nemt at håndtere navigation mellem visninger.

For vores opgave-tracker giver routing os mange muligheder:

• Definer ruter — for eksempel, tilknyt stien /tasks til en komponent, der viser alle opgaver;

• Naviger uden genindlæsning — gå til /tasks/15 og se straks detaljerne for opgave 15;

• Vis forskellige komponenter baseret på URL'en — såsom en opgaveliste, en formular til ny opgave eller indstillinger;

• Brug ruteparametre — som opgave-ID'er eller filtre (/tasks?status=done);

• Opret indlejrede ruter — for eksempel brugerindstillinger inde i en profilsektion (/profile/settings);

• Beskyt ruter — som at kræve, at brugere er logget ind for at få adgang til /settings.

I praksis definerer du blot et sæt regler: hvilken sti skal indlæse hvilken komponent. Angular håndterer resten, inklusive navigation og rendering automatisk.

Fra brugerens synspunkt fungerer det hele som et almindeligt website — de kan klikke på links, bruge browserens tilbage- og frem-knapper og endda dele direkte links til specifikke visninger i appen.