Routing Instellen in Angular
Om alles te laten werken, moet je Angular vertellen welke URL welk component toont. Dit wordt routing genoemd. Laten we beginnen!
Het hoofd routing-bestand
Wanneer je een Angular-app maakt met de CLI, kun je routing direct vanaf het begin inschakelen — beantwoord gewoon "Yes" wanneer er naar routing wordt gevraagd. Angular maakt dan de benodigde bestanden voor je aan (wat we al hebben gedaan bij het aanmaken van de app). Een van deze bestanden is app.routes.ts
.
Mocht je dit bestand om wat voor reden dan ook niet hebben, geen zorgen — je kunt het zelf aanmaken in de hoofdmap van je project. Het zou er als volgt uit moeten zien:
routes.ts
Dit bestand geeft aan welke routes er in je app bestaan en welke componenten voor elke route moeten worden weergegeven.
Zorg er ook voor dat je routes zijn gekoppeld in app.config.ts
zoals hieronder:
config.ts
Zonder de regel provideRouter(routes)
weet Angular niets van je routes, zelfs als ze zijn gedefinieerd in app.routes.ts
.
Routes configureren
Laten we nu routes toevoegen voor onze Task Tracker-app. Open app.routes.ts
en schrijf de volgende code:
routes.ts
Dit is gewoon een array van routes die we exporteren. Elke route is een object met de volgende instellingen:
-
path
— het URL-pad; -
component
— het component dat wordt weergegeven bij navigatie naar dat pad.
In ons geval hebben we twee routes:
De hoofdpagina met de lijst van taken.
routes.ts
Wanneer een gebruiker de root-URL (localhost:4200/
) bezoekt, toont Angular de TaskListComponent
.
Taakdetailpagina met informatie over een enkele taak:
routes.ts
Hier is :id
een dynamische parameter. Angular begrijpt dat :id
elke waarde kan zijn (zoals /task/1
, /task/42
, enzovoort). Deze waarde wordt automatisch doorgegeven aan TaskDetailsComponent
, en je kunt deze gebruiken om gegevens voor die specifieke taak op te halen.
Dus wanneer een gebruiker naar localhost:4200/task/1
gaat, toont Angular TaskDetailsComponent
met de details voor taak nr. 1.
Op dit moment werkt er nog niets omdat we alleen de routes hebben gedefinieerd, maar deze nog niet volledig aan onze componenten hebben gekoppeld. Laten we dat in het volgende hoofdstuk doen!
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 3.13
Routing Instellen in Angular
Veeg om het menu te tonen
Om alles te laten werken, moet je Angular vertellen welke URL welk component toont. Dit wordt routing genoemd. Laten we beginnen!
Het hoofd routing-bestand
Wanneer je een Angular-app maakt met de CLI, kun je routing direct vanaf het begin inschakelen — beantwoord gewoon "Yes" wanneer er naar routing wordt gevraagd. Angular maakt dan de benodigde bestanden voor je aan (wat we al hebben gedaan bij het aanmaken van de app). Een van deze bestanden is app.routes.ts
.
Mocht je dit bestand om wat voor reden dan ook niet hebben, geen zorgen — je kunt het zelf aanmaken in de hoofdmap van je project. Het zou er als volgt uit moeten zien:
routes.ts
Dit bestand geeft aan welke routes er in je app bestaan en welke componenten voor elke route moeten worden weergegeven.
Zorg er ook voor dat je routes zijn gekoppeld in app.config.ts
zoals hieronder:
config.ts
Zonder de regel provideRouter(routes)
weet Angular niets van je routes, zelfs als ze zijn gedefinieerd in app.routes.ts
.
Routes configureren
Laten we nu routes toevoegen voor onze Task Tracker-app. Open app.routes.ts
en schrijf de volgende code:
routes.ts
Dit is gewoon een array van routes die we exporteren. Elke route is een object met de volgende instellingen:
-
path
— het URL-pad; -
component
— het component dat wordt weergegeven bij navigatie naar dat pad.
In ons geval hebben we twee routes:
De hoofdpagina met de lijst van taken.
routes.ts
Wanneer een gebruiker de root-URL (localhost:4200/
) bezoekt, toont Angular de TaskListComponent
.
Taakdetailpagina met informatie over een enkele taak:
routes.ts
Hier is :id
een dynamische parameter. Angular begrijpt dat :id
elke waarde kan zijn (zoals /task/1
, /task/42
, enzovoort). Deze waarde wordt automatisch doorgegeven aan TaskDetailsComponent
, en je kunt deze gebruiken om gegevens voor die specifieke taak op te halen.
Dus wanneer een gebruiker naar localhost:4200/task/1
gaat, toont Angular TaskDetailsComponent
met de details voor taak nr. 1.
Op dit moment werkt er nog niets omdat we alleen de routes hebben gedefinieerd, maar deze nog niet volledig aan onze componenten hebben gekoppeld. Laten we dat in het volgende hoofdstuk doen!
Bedankt voor je feedback!