Routing Instellen in Angular
Om alles te laten werken, moet je Angular vertellen welke URL welk component toont. Dit wordt routing genoemd.
Het hoofd routing-bestand
Wanneer je een Angular-app maakt met de CLI, kun je routing direct vanaf het begin inschakelen — antwoord gewoon "Yes" wanneer er naar routing wordt gevraagd. Angular maakt dan automatisch de benodigde bestanden aan (wat we al hebben gedaan bij het aanmaken van de app). Een van deze bestanden is app.routes.ts.
Als je dit bestand om wat voor reden dan ook niet hebt, 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 slechts 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 task №1.
Op dit moment werkt er nog niets omdat we alleen de routes hebben gedefinieerd, maar ze nog niet volledig aan onze componenten hebben gekoppeld. Dit gaan we doen in het volgende hoofdstuk!
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.13Routing 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.
Het hoofd routing-bestand
Wanneer je een Angular-app maakt met de CLI, kun je routing direct vanaf het begin inschakelen — antwoord gewoon "Yes" wanneer er naar routing wordt gevraagd. Angular maakt dan automatisch de benodigde bestanden aan (wat we al hebben gedaan bij het aanmaken van de app). Een van deze bestanden is app.routes.ts.
Als je dit bestand om wat voor reden dan ook niet hebt, 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 slechts 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 task №1.
Op dit moment werkt er nog niets omdat we alleen de routes hebben gedefinieerd, maar ze nog niet volledig aan onze componenten hebben gekoppeld. Dit gaan we doen in het volgende hoofdstuk!
Bedankt voor je feedback!
