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