ITBLogs.Info ITBLogs.Info

Separating the routes in angular

Jan 2, 2020 Angular

I don't know why the default .net core angular template all routes in the app.modules.ts like this

Code

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])

If you build more modules, then the codes will become quite unmanageable. This is not clean at all.
I suggest a better practice, to create app.routes.ts.
This like:

Code

export class AppRoutes {
    getRoutes() {
        return [
            { path: '', component: HomeComponent, pathMatch: 'full' },
            { path: 'counter', component: CounterComponent },
      
            { path: 'fetch-data', component: FetchDataComponent },
        ];
    }
}

Then in the app.modules.ts, it will import the routes

Code

let appRoutes = new AppRoutes();
  RouterModule.forRoot(appRoutes.getRoutes())

This approach is more clear

Trackback address for this post

Trackback URL (right click and copy shortcut/link location)

Feedback awaiting moderation

This post has 590 feedbacks awaiting moderation...


Form is loading...

Comment feed for this post