A Brief Overview of Routing In Angular

Posted By : Abhijeet Kumar | 27-Mar-2022

 

 

Router in Angular is used to navigate the pages in an application. A single-page application (SPA) does not have multiple-page concepts, and it moves from one view (expense list) to another view.

 

In routing, we can load components through the following: 

 

  1. Eager loading 
  2. Lazy loading
  3. Pre-Loading

 

Eager loading :

All the feature modules will be loaded before the application starts in Eager loading, and all required dependencies will be resolved. This will result in a bit of delay in application start, but requests after the application start will be much after the Lazy loading technique.


Here we need to import our components in routing module.ts file

 

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from ./login.component';

import { SignupComponent } from ./signup.component';

 

const rout: Routes = [{

  path:'',redirectTo:'login' , pathMatch:'full'

},{

  path:'signup', component:SignupComponent

},{

  path:"login", component:LoginComponent

}

];

 

@NgModule({

  imports: [

    CommonModule,

    RouterModule.forRoot(rout)

  ],exports:[RouterModule],

  declarations: []

})

export class AppRoutingModule { }

 

The RouterMoudle.forRoot() method will set up the navigation rules configured in the route variable

 

If we want to load a child component at the same time when we load the parent component.

Example -> when we load the application at the same time if we want to show the login page ---

path:'',redirectTo:'login' , pathMatch:'full'  

 

We need to use RouterOutlet tags where we want to show our components.

<router-outlet></router-outlet>

 

 

 

Lazy loading

Feature modules under Lazy Loading would be loaded on demand after the application starts. It helps to start application faster.

 

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule, Routes } from '@angular/router';

 

const rout: Routes = [{

  path:'',redirectTo:'login' , pathMatch:'full'

},{

  path:'signup', 

  loadChildren:()=> import('./signup/signup.module').then(mod=>mod.SignupModule) 

},{

  path:"login",

  loadChildren:()=> import('./login/login.module').then(mod=>mod.LoginModule)

},{

  path:"dashbord",

  loadChildren:()=> import('./dashbord/dashbord.module').then(mod=>mod.DashbordModule)

}

];


 

@NgModule({

  imports: [

    CommonModule,

    RouterModule.forRoot(rout)

  ],exports:[RouterModule],

  declarations: []

})

export class AppRoutingModule { }

 

 

 

Pre-Loading

Feature Modules under Pre-Loading would be loaded automatically after the application starts.


 

We are an ERP development company that builds custom web solutions for diverse business needs. Our team uses open-source software platforms like Odoo, OFBiz, ERPNext, and Opentaps to build scalable ERP applications from the ground-up. To learn more about our ERP software services, contact us at [email protected].

 

 

 



 


Please remove URL from text

Comment is required

Sending message..
Connect with us