From a8f68371f0f7e68092b99ad29fba080f8619b321 Mon Sep 17 00:00:00 2001 From: Konrad Date: Mon, 8 Jul 2024 01:15:01 +0200 Subject: [PATCH] feat(roadmap/angular): add more resources about angular routing (#6089) --- .../content/107-routing/100-configuration.md | 22 +++++++++++++++++++ .../content/107-routing/101-router-outlets.md | 3 ++- .../content/107-routing/102-router-links.md | 3 ++- .../content/107-routing/103-router-events.md | 3 ++- 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/data/roadmaps/angular/content/107-routing/100-configuration.md b/src/data/roadmaps/angular/content/107-routing/100-configuration.md index a025a48b1..691b3dc63 100644 --- a/src/data/roadmaps/angular/content/107-routing/100-configuration.md +++ b/src/data/roadmaps/angular/content/107-routing/100-configuration.md @@ -1 +1,23 @@ # Configuration + +The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router. + +### Example routes: +```typescript +const appRoutes: Routes = [ + { path: 'custom-path', component: CustomComponet }, + { path: 'custom-path/:id', component: CustomDetailComponet, data: { title: 'Details component' } }, + { path: '', redirectTo: '/heroes', pathMatch: 'full'}, + { path: '**', component: PageNotFoundComponent } +]; +``` + +- `'custom-path'`: defining a new url route. +- `'custom-path/:id'` defining _**id**_ parameter. +- `''` (empty path): instantiate a component without the need for defining a new url route. +- `'**'`: for undefined paths. +- The `data` property in the second route is a place to store arbitrary data associated with this specific route. + +Visit the following resources to learn more: + +- [@official@Router reference - Configuration](https://angular.dev/guide/routing/router-reference#configuration) diff --git a/src/data/roadmaps/angular/content/107-routing/101-router-outlets.md b/src/data/roadmaps/angular/content/107-routing/101-router-outlets.md index 2e88ba6e9..0c4cee0a9 100644 --- a/src/data/roadmaps/angular/content/107-routing/101-router-outlets.md +++ b/src/data/roadmaps/angular/content/107-routing/101-router-outlets.md @@ -6,4 +6,5 @@ Thanks to the router outlet, your app will have multiple views/pages and the app Visit the following resources to learn more: -- [@official@Understanding Router Outlets](https://angular.dev/api/router/RouterOutlet) +- [@official@Router reference - Router outlet](https://angular.dev/guide/routing/router-reference#router-outlet) +- [@official@Router outlet - API](https://angular.dev/api/router/RouterOutlet) diff --git a/src/data/roadmaps/angular/content/107-routing/102-router-links.md b/src/data/roadmaps/angular/content/107-routing/102-router-links.md index 2e419fc1a..7ff49e9f7 100644 --- a/src/data/roadmaps/angular/content/107-routing/102-router-links.md +++ b/src/data/roadmaps/angular/content/107-routing/102-router-links.md @@ -4,5 +4,6 @@ In Angular, routerLink when applied to an element in a template, makes that elem Visit the following resources to learn more: -- [@official@RouterLink](https://angular.dev/api/router/RouterLink) +- [@official@Router reference - Router links](https://angular.dev/guide/routing/router-reference#router-links) +- [@official@Router link - API](https://angular.dev/api/router/RouterLink) - [@article@Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl](https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl) diff --git a/src/data/roadmaps/angular/content/107-routing/103-router-events.md b/src/data/roadmaps/angular/content/107-routing/103-router-events.md index c9b5f7c78..f8e57ceb6 100644 --- a/src/data/roadmaps/angular/content/107-routing/103-router-events.md +++ b/src/data/roadmaps/angular/content/107-routing/103-router-events.md @@ -2,4 +2,5 @@ The Angular Router raises events when it navigates from one route to another route. It raises several events such as `NavigationStart`, `NavigationEnd`, `NavigationCancel`, `NavigationError`, `ResolveStart`, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start (NavigationStart) and route change end (NavigationEnd). -- [@official@Angular Official Website](https://angular.dev/api/router/RouterEvent) +- [@official@Router reference - Router events](https://angular.dev/guide/routing/router-reference#router-events) +- [@official@Router event - API](https://angular.dev/api/router/RouterEvent)