Angular Route is an array of route configurations. The “RouterModule.forRoot” method in the module imports to configure the router.
type Routes = Route[];
Each Route has the following properties -
interface Route {
path?: string
pathMatch?: string
matcher?: UrlMatcher
component?: Type<any>
redirectTo?: string
outlet?: string
canActivate?: any[]
canActivateChild?: any[]
canDeactivate?: any[]
canLoad?: any[]
data?: Data
resolve?: ResolveData
children?: Routes
loadChildren?: LoadChildren
runGuardsAndResolvers?: RunGuardsAndResolvers
}
List of properties and it has the following order -
1. path - It uses the route matcher DSL
2. pathMatch - It uses to specifies the matching strategy
3. matcher - It uses to defines a custom strategy for path matching
4. component - It is a component type
5. redirectTo - It is the URL fragment and it will replace the current matched segment
6. outlet - It is the name of the outlet the component should be placed into
7. canActivate - It is an array of DI tokens and used to handle the CanActivate handlers
8. canActivateChild - It is an array of DI tokens and used to handle the CanActivateChild handlers
9. canDeactivate - It is an array of DI tokens and used to handle the CanDeactivate handlers
10. canLoad - It is an array of DI tokens and used to handle the CanLoad handlers
11. data - It is additional data provided to the component by using the ActivatedRoute
12. resolve - It is a map of DI tokens used to look up data resolvers
13. runGuardsAndResolvers - It is defined when guards and resolvers will be run and by default, they run only when the matrix parameters of the route change.
14. children - it is an array of child route definitions
15. loadChildren - It is a reference to lazily loaded child routes.
The following example help you to understand the Router, Router module, and Routes -
In this example, the array of appRoots describes how to navigate from one view to other views and pass it into RouterModule.forRoot method to configure the router.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {Routes, RouterModule,} from '@angular/router';
//Import Components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
//Apps roots
const appRoots = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'user/:id', component: UserDetailComponent }, //Id is a Roots parameter.
{ path: 'users', component: UserComponent, data:{ title:'User List'} },
{ path: '**', redirectTo: 'PageNotFoundComponent' } //Wild Cards (**), the router will instantiate the PageNotFound component
];
//AppModule class with @NgModule decorator
@NgModule({
//Static, this is the compiler configuration
//declarations is used for configure the selectors
declarations: [
AppComponent,
DashboardComponent,
UserComponent,
UserDetailComponent,
PageNotFoundComponent,
],
//Composability and Grouping
//imports used for composing NgModules together
imports: [
BrowserModule,
//enableTracing is used for debugging purposes only
RouterModule.forRoot(appRoots, { enableTracing: true })
],
//Runtime or injector configuration
//providers is used for runtime injector configuration
providers: [],
//bootstrapped entry component
bootstrap: [AppComponent]
})
export class AppModule { }
For
more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|