Konfigurering av routing i Angular
For å få alt til å fungere, må du fortelle Angular hvilken URL som viser hvilken komponent. Dette kalles routing.
Hovedfilen for routing
Når du oppretter en Angular-applikasjon 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, trenger du ikke bekymre deg — du kan opprette den selv i rotmappen til prosjektet ditt. Den skal se slik ut:
routes.ts
Denne filen informerer Angular om 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:
config.ts
Uten linjen provideRouter(routes) vil ikke Angular kjenne til 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:
routes.ts
Dette er bare et array med ruter som vi eksporterer. Hver rute er et objekt med følgende innstillinger:
-
path— URL-sti; -
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.
routes.ts
Når en bruker besøker rot-URL-en (localhost:4200/), vil Angular vise TaskListComponent.
Oppgavedetaljside som viser informasjon om en enkelt oppgave:
routes.ts
Her er :id en dynamisk parameter. Angular forstår at :id kan være hvilken som helst verdi (for eksempel /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 bare har definert rutene, men vi har ikke koblet dem til komponentene våre fullt ut. Dette skal vi gjøre i neste kapittel!
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain how to connect the routes to the components?
What should I do if my app.routes.ts file is missing?
How do I use the dynamic :id parameter in TaskDetailsComponent?
Awesome!
Completion rate improved to 3.13Konfigurering av routing i Angular
Sveip for å vise menyen
For å få alt til å fungere, må du fortelle Angular hvilken URL som viser hvilken komponent. Dette kalles routing.
Hovedfilen for routing
Når du oppretter en Angular-applikasjon 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, trenger du ikke bekymre deg — du kan opprette den selv i rotmappen til prosjektet ditt. Den skal se slik ut:
routes.ts
Denne filen informerer Angular om 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:
config.ts
Uten linjen provideRouter(routes) vil ikke Angular kjenne til 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:
routes.ts
Dette er bare et array med ruter som vi eksporterer. Hver rute er et objekt med følgende innstillinger:
-
path— URL-sti; -
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.
routes.ts
Når en bruker besøker rot-URL-en (localhost:4200/), vil Angular vise TaskListComponent.
Oppgavedetaljside som viser informasjon om en enkelt oppgave:
routes.ts
Her er :id en dynamisk parameter. Angular forstår at :id kan være hvilken som helst verdi (for eksempel /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 bare har definert rutene, men vi har ikke koblet dem til komponentene våre fullt ut. Dette skal vi gjøre i neste kapittel!
Takk for tilbakemeldingene dine!
