Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Routing Instellen in Angular | Routing and Navigation in Angular
Introductie tot Angular

bookRouting 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

routes.ts

copy

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

config.ts

copy

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

routes.ts

copy

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

routes.ts

copy

Wanneer een gebruiker de root-URL (localhost:4200/) bezoekt, toont Angular de TaskListComponent.

Taakdetailpagina met informatie over een enkele taak:

routes.ts

routes.ts

copy

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!

question mark

In welk bestand worden de routes doorgaans gedefinieerd in een Angular-applicatie?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 6. Hoofdstuk 3

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.13

bookRouting 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

routes.ts

copy

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

config.ts

copy

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

routes.ts

copy

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

routes.ts

copy

Wanneer een gebruiker de root-URL (localhost:4200/) bezoekt, toont Angular de TaskListComponent.

Taakdetailpagina met informatie over een enkele taak:

routes.ts

routes.ts

copy

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!

question mark

In welk bestand worden de routes doorgaans gedefinieerd in een Angular-applicatie?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 6. Hoofdstuk 3
some-alt