Afhandelen van Niet-Bestaande Routes in Angular
Soms voeren gebruikers handmatig een onjuiste URL in of klikken ze op een verouderde link. In dergelijke gevallen is het belangrijk om een duidelijke "Pagina niet gevonden"-melding te tonen in plaats van een leeg scherm of een technische foutmelding. In deze module maken we een 404-pagina-component, configureren we onze routes om deze te tonen voor alle onbekende paden en voegen we een verzorgde opmaak toe.
Het NotFoundComponent aanmaken
We maken een nieuw Angular-component genaamd NotFoundComponent dat zal dienen als onze 404-pagina. Deze toont een koptekst, een korte foutmelding en een knop om de gebruiker terug te leiden naar de homepage.
Voer het volgende commando uit om het component te genereren:
Hiermee wordt automatisch een map not-found aangemaakt met vier bestanden. Je bent al bekend met deze bestanden en je kunt het testbestand verwijderen als je dit niet gebruikt.
Component bouwen
HTML toevoegen voor het tonen van een "404" titel, een eenvoudige boodschap en een "Ga naar Home" knop:
not-found-conponent.html
not-found-conponent.css
Eenvoudige lay-out met één bijzonder onderdeel — de goToHome()-methode. Wanneer op de knop wordt geklikt, wordt de gebruiker doorgestuurd naar de homepage.
Er is ook wat CSS toegevoegd om de 404-pagina visueel aantrekkelijk te maken — gecentreerde tekst, een opvallende kop en een strakke, heldere knop.
Navigatielogica toevoegen
Nu wordt de methode geïmplementeerd om de gebruiker terug naar de startpagina te navigeren.
not-found-conponent.ts
Hier injecteren we Angular's Router om handmatig tussen routes te navigeren. In de methode goToHome() gebruiken we navigate(['/']) om de gebruiker naar de rootroute te sturen.
Afhandelen van alle onbekende routes
Nu werken we de routeringsconfiguratie van de app bij zodat de NotFoundComponent wordt weergegeven voor alle niet-gedefinieerde paden.
Voeg in je app.routes.ts-bestand de volgende route helemaal onderaan toe:
routes.ts
Het ** pad is een wildcard die elke route matcht die niet eerder is gematcht. Bijvoorbeeld, navigeren naar /wrong-url toont de 404-pagina.
Waarom Moet de Wildcardroute Altijd Laatst Staan?
In Angular wordt de routeringsconfiguratie in volgorde geëvalueerd—van boven naar beneden. Dit betekent dat de router elke route achtereenvolgens controleert en stopt zodra er een match is gevonden.
De wildcardroute ({ path: '**' }) is een vangnetroute. Deze matcht elk pad dat niet door de voorgaande routes is gematcht. Als je deze vóór specifiekere routes plaatst, zal deze alles opvangen en worden de overige routes nooit bereikt—zelfs als ze geldig zijn.
Nu verwerkt je app navigatiefouten op een nette manier: in plaats van te crashen of een leeg scherm te tonen, zien gebruikers een vriendelijke 404-melding met een duidelijke weg terug naar de homepage.
Je app is nu volledig functioneel en gebruiksvriendelijk! 🎉 Als je de volledige versie van dit project wilt downloaden, klik dan op de onderstaande knop.
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.13Afhandelen van Niet-Bestaande Routes in Angular
Veeg om het menu te tonen
Soms voeren gebruikers handmatig een onjuiste URL in of klikken ze op een verouderde link. In dergelijke gevallen is het belangrijk om een duidelijke "Pagina niet gevonden"-melding te tonen in plaats van een leeg scherm of een technische foutmelding. In deze module maken we een 404-pagina-component, configureren we onze routes om deze te tonen voor alle onbekende paden en voegen we een verzorgde opmaak toe.
Het NotFoundComponent aanmaken
We maken een nieuw Angular-component genaamd NotFoundComponent dat zal dienen als onze 404-pagina. Deze toont een koptekst, een korte foutmelding en een knop om de gebruiker terug te leiden naar de homepage.
Voer het volgende commando uit om het component te genereren:
Hiermee wordt automatisch een map not-found aangemaakt met vier bestanden. Je bent al bekend met deze bestanden en je kunt het testbestand verwijderen als je dit niet gebruikt.
Component bouwen
HTML toevoegen voor het tonen van een "404" titel, een eenvoudige boodschap en een "Ga naar Home" knop:
not-found-conponent.html
not-found-conponent.css
Eenvoudige lay-out met één bijzonder onderdeel — de goToHome()-methode. Wanneer op de knop wordt geklikt, wordt de gebruiker doorgestuurd naar de homepage.
Er is ook wat CSS toegevoegd om de 404-pagina visueel aantrekkelijk te maken — gecentreerde tekst, een opvallende kop en een strakke, heldere knop.
Navigatielogica toevoegen
Nu wordt de methode geïmplementeerd om de gebruiker terug naar de startpagina te navigeren.
not-found-conponent.ts
Hier injecteren we Angular's Router om handmatig tussen routes te navigeren. In de methode goToHome() gebruiken we navigate(['/']) om de gebruiker naar de rootroute te sturen.
Afhandelen van alle onbekende routes
Nu werken we de routeringsconfiguratie van de app bij zodat de NotFoundComponent wordt weergegeven voor alle niet-gedefinieerde paden.
Voeg in je app.routes.ts-bestand de volgende route helemaal onderaan toe:
routes.ts
Het ** pad is een wildcard die elke route matcht die niet eerder is gematcht. Bijvoorbeeld, navigeren naar /wrong-url toont de 404-pagina.
Waarom Moet de Wildcardroute Altijd Laatst Staan?
In Angular wordt de routeringsconfiguratie in volgorde geëvalueerd—van boven naar beneden. Dit betekent dat de router elke route achtereenvolgens controleert en stopt zodra er een match is gevonden.
De wildcardroute ({ path: '**' }) is een vangnetroute. Deze matcht elk pad dat niet door de voorgaande routes is gematcht. Als je deze vóór specifiekere routes plaatst, zal deze alles opvangen en worden de overige routes nooit bereikt—zelfs als ze geldig zijn.
Nu verwerkt je app navigatiefouten op een nette manier: in plaats van te crashen of een leeg scherm te tonen, zien gebruikers een vriendelijke 404-melding met een duidelijke weg terug naar de homepage.
Je app is nu volledig functioneel en gebruiksvriendelijk! 🎉 Als je de volledige versie van dit project wilt downloaden, klik dan op de onderstaande knop.
Bedankt voor je feedback!
