{"id":59888,"date":"2018-05-03T15:57:09","date_gmt":"2018-05-03T10:27:09","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59888"},"modified":"2024-04-12T14:20:49","modified_gmt":"2024-04-12T08:50:49","slug":"angular-route-configuration","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-route-configuration\/","title":{"rendered":"Angular Route Configuration"},"content":{"rendered":"

Angular Route Configuration<\/h1>\n

Angular Routes is an array of route configurations. Each Angular route, has the following properties:<\/p>\n

 <\/p>\n

path is a string that uses the route matcher DSL.
\npathMatch is a string that specifies the matching strategy.
\nmatcher defines a custom strategy for path matching and supersedes path and pathMatch.
\ncomponent is a component type.
\nredirectTo is the url fragment which will replace the current matched segment.
\noutlet is the name of the outlet the component should be placed into.
\ncanActivate is an array of DI tokens used to look up CanActivate handlers.
\ncanActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
\ncanDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
\ncanLoad is an array of DI tokens used to look up CanLoad handlers.
\ndata is additional data provided to the component via ActivatedRoute.
\nresolve is a map of DI tokens used to look up data resolvers.
\nrunGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
\nchildren is an array of child route definitions.
\nloadChildren is a reference to lazy loaded child routes.<\/p>\n

 <\/p>\n

A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display.<\/p>\n

A router has no routes until you configure it. The following example creates four route definitions, configures the router via the RouterModule.forRoot method, and adds the result to the AppModule’s imports array.<\/p>\n

 <\/p>\n

src\/app\/app.module.ts (excerpt)<\/u><\/p>\n

const appRoutes: Routes = [<\/p>\n

{ path: ‘crisis-center’, component: CrisisListComponent },<\/p>\n

{ path: ‘hero\/:id’,component: HeroDetailComponent },<\/p>\n

{<\/p>\n

path: ‘heroes’,<\/p>\n

component: HeroListComponent,<\/p>\n

data: { title: ‘Heroes List’ }<\/p>\n

},<\/p>\n

{ path: ”,<\/p>\n

redirectTo: ‘\/heroes’,<\/p>\n

pathMatch: ‘full’<\/p>\n

},<\/p>\n

{ path: ‘**’, component: PageNotFoundComponent }<\/p>\n

];<\/p>\n

 <\/p>\n

@NgModule({<\/p>\n

imports: [<\/p>\n

RouterModule.forRoot(<\/p>\n

appRoutes,<\/p>\n

{ enableTracing: true } \/\/ <– debugging purposes only<\/p>\n

)<\/p>\n

\/\/ other imports here<\/p>\n

],<\/p>\n

…<\/p>\n

})<\/p>\n

export class AppModule { }<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n