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:
@@ -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)
|
||||
|
Reference in New Issue
Block a user