feat(roadmap/angular): add more resources about angular routing (#6089)

pull/6093/head
Konrad 5 months ago committed by GitHub
parent 0da2cab0ab
commit a8f68371f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 22
      src/data/roadmaps/angular/content/107-routing/100-configuration.md
  2. 3
      src/data/roadmaps/angular/content/107-routing/101-router-outlets.md
  3. 3
      src/data/roadmaps/angular/content/107-routing/102-router-links.md
  4. 3
      src/data/roadmaps/angular/content/107-routing/103-router-events.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)

@ -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)

@ -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)

@ -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)

Loading…
Cancel
Save