For at alt skal fungere, må du fortelle Angular hvilken URL som viser hvilken komponent. Dette kalles routing.

Hovedfilen for routing

Når du oppretter en Angular-app med CLI, kan du aktivere routing med en gang — bare svar "Yes" når du blir spurt om routing. Angular vil da opprette de nødvendige filene for deg (noe vi allerede gjorde da vi opprettet appen). En av disse filene er app.routes.ts.

Hvis du ikke har denne filen av en eller annen grunn, er det ingen grunn til bekymring — du kan opprette den selv i rotmappen til prosjektet ditt. Den skal se slik ut:

Denne filen forteller Angular hvilke ruter som finnes i appen din og hvilke komponenter som skal vises for hver rute.

Sørg også for at rutene dine er koblet til i app.config.ts slik:

Uten linjen provideRouter(routes) vil ikke Angular vite om rutene dine, selv om de er definert i app.routes.ts.

Konfigurere ruter

Nå skal vi legge til ruter for vår Task Tracker-app. Åpne app.routes.ts og skriv inn følgende kode:

Dette er bare et array med ruter som vi eksporterer. Hver rute er et objekt med disse innstillingene:

• path — URL-stien;

• component — komponenten som vises når du navigerer til den stien.

I vårt tilfelle har vi to ruter:

Hovedsiden som viser listen over oppgaver.

Når en bruker besøker rot-URL-en (localhost:4200/), vil Angular vise TaskListComponent.

Oppgavedetaljside som viser informasjon om en enkelt oppgave:

Her er :id en dynamisk parameter. Angular forstår at :id kan være hvilken som helst verdi (som /task/1, /task/42, osv.). Denne verdien sendes automatisk til TaskDetailsComponent, og du kan bruke den til å hente data for den spesifikke oppgaven.

Når en bruker går til localhost:4200/task/1, vil Angular vise TaskDetailsComponent med detaljene for task №1.

Akkurat nå vil ingenting fungere ennå fordi vi kun har definert rutene, men vi har ikke koblet dem til komponentene våre fullt ut. Dette skal vi gjøre i neste kapittel!