Skip to content

Commit

Permalink
feat(roadmap/angular): add more resources about angular routing (#6089)
Browse files Browse the repository at this point in the history
  • Loading branch information
Kordrad authored Jul 7, 2024
1 parent 0da2cab commit a8f6837
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 3 deletions.
22 changes: 22 additions & 0 deletions src/data/roadmaps/angular/content/107-routing/100-configuration.md
Original file line number Diff line number Diff line change
@@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -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)

0 comments on commit a8f6837

Please sign in to comment.