1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-19 07:31:24 +02:00

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

This commit is contained in:
Konrad
2024-07-08 01:15:01 +02:00
committed by GitHub
parent 0da2cab0ab
commit a8f68371f0
4 changed files with 28 additions and 3 deletions

View File

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

View File

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

View File

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

View File

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