Skip to content

Commit a8f6837

Browse files
authored
feat(roadmap/angular): add more resources about angular routing (#6089)
1 parent 0da2cab commit a8f6837

File tree

4 files changed

+28
-3
lines changed

4 files changed

+28
-3
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
11
# Configuration
2+
3+
The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router.
4+
5+
### Example routes:
6+
```typescript
7+
const appRoutes: Routes = [
8+
{ path: 'custom-path', component: CustomComponet },
9+
{ path: 'custom-path/:id', component: CustomDetailComponet, data: { title: 'Details component' } },
10+
{ path: '', redirectTo: '/heroes', pathMatch: 'full'},
11+
{ path: '**', component: PageNotFoundComponent }
12+
];
13+
```
14+
15+
- `'custom-path'`: defining a new url route.
16+
- `'custom-path/:id'` defining _**id**_ parameter.
17+
- `''` (empty path): instantiate a component without the need for defining a new url route.
18+
- `'**'`: for undefined paths.
19+
- The `data` property in the second route is a place to store arbitrary data associated with this specific route.
20+
21+
Visit the following resources to learn more:
22+
23+
- [@official@Router reference - Configuration](https://angular.dev/guide/routing/router-reference#configuration)

src/data/roadmaps/angular/content/107-routing/101-router-outlets.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ Thanks to the router outlet, your app will have multiple views/pages and the app
66

77
Visit the following resources to learn more:
88

9-
- [@official@Understanding Router Outlets](https://angular.dev/api/router/RouterOutlet)
9+
- [@official@Router reference - Router outlet](https://angular.dev/guide/routing/router-reference#router-outlet)
10+
- [@official@Router outlet - API](https://angular.dev/api/router/RouterOutlet)

src/data/roadmaps/angular/content/107-routing/102-router-links.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ In Angular, routerLink when applied to an element in a template, makes that elem
44

55
Visit the following resources to learn more:
66

7-
- [@official@RouterLink](https://angular.dev/api/router/RouterLink)
7+
- [@official@Router reference - Router links](https://angular.dev/guide/routing/router-reference#router-links)
8+
- [@official@Router link - API](https://angular.dev/api/router/RouterLink)
89
- [@article@Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl](https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl)

src/data/roadmaps/angular/content/107-routing/103-router-events.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22

33
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).
44

5-
- [@official@Angular Official Website](https://angular.dev/api/router/RouterEvent)
5+
- [@official@Router reference - Router events](https://angular.dev/guide/routing/router-reference#router-events)
6+
- [@official@Router event - API](https://angular.dev/api/router/RouterEvent)

0 commit comments

Comments
 (0)