Configure Angular Route Definitions – Part 2

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:

• Create a separate file at the root level, for example, app-routing.module.ts
• Take out routing-related information such as the following from the AppModule
  file, and place them in app-routing.module.ts :
  • Routing library
  • Routing definitions
  • RouterModule.forRoot configuration
• The following is the sample code for app-routing.module.ts. Make a note of RouterModule.forRoot API for registering top-level application routes. Angular mandates  RouterModule.forRoot to be called in root AppRoutingModule or AppModule if this is where routes are defined. In any other module, it will RouterModule.forChild API which will be called to register the routes specific to feature modules.

  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 {}
  

• Include AppRoutingModule in the AppModule file, app.module.ts by importing it from app routing.module.ts , and, also import it in the imports array. The following is the sample code for AppModule. Pay attention to inclusion of AppRoutingModule against imports in @NgModule meta definition.

  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.

• Author
• Recent Posts

Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com

Follow me

Latest posts by Ajitesh Kumar (see all)

• Mean Squared Error vs Cross Entropy Loss Function - April 28, 2024
• Cross Entropy Loss Explained with Python Examples - April 28, 2024
• Logistic Regression in Machine Learning: Python Example - April 26, 2024