In this blog, we will learn about how to configure Angular route definitions in an Angular app by defining route definitions as a separate module at the root level. Again, this is not the most effective way of defining Angular route definitions. In third part of this series, we will learn about how to define route definitions as part of separate feature modules, and, not at the root level. In the previous blog in this series, we learned about the most trivial way of configuring route definitions in an Angular app.
As the app starts getting complex, one needs to use routing concepts such as child routes, guards, resolvers, and so on. Defining complex routing definitions in AppModule would end up mixing different application concerns. In such scenarios, it is recommended to create a route definition in its own module. This module can be termed as Routing Module. This follows the separation of concerns design pattern in a way that all the routing related concerns are handled as part of the routing module. The following needs to be done to define a routing module:
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { LoginComponent } from './login/login.component'; import { UserRegistrationComponent } from './login/user-registration.component'; import { ForgotPasswordComponent } from './login/forgot-password.component'; import { PageNotFoundComponent } from './utils/page-not-found.component'; import { DoctorListComponent } from './doctor/doctor-list.component'; const appRoutes: Routes = [ { path: 'register', component: UserRegistrationComponent, data: {title: 'New User Registration'} }, { path: 'forgotpassword', component: ForgotPasswordComponent, data: {title: 'Forgot Password'} }, { path: 'login', component: LoginComponent, data: {title: 'User Login' } }, { path: 'doctors', component: DoctorListComponent, data: { title: 'Doctors Information' }}, { path: 'doctors/:speciality', component: DoctorListComponent, data: { title: 'Doctors Information' }}, { path: 'index', component: HomeComponent }, { path: '', redirectTo: '/index', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { HomeComponent } from './home.component'; import { LoginComponent } from './login/login.component'; import { UserRegistrationComponent } from './login/user-registration.component'; import { ForgotPasswordComponent } from './login/forgot-password.component'; import { PageNotFoundComponent } from './utils/page-not-found.component'; import { DoctorListComponent } from './doctor/doctor-list.component'; import { DoctorService } from './doctor/doctor.service'; @NgModule({ imports:[ BrowserModule, FormsModule, AppRoutingModule, HttpModule, JsonpModule ], declarations: [ AppComponent, LoginComponent, UserRegistrationComponent, ForgotPasswordComponent, PageNotFoundComponent, HomeComponent, DoctorListComponent], providers: [ DoctorService ], bootstrap: [ AppComponent ] }) export class AppModule { }
Greater details in relation with above and much more can be obtained from my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.
Last updated: 28th April, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 28th April, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…