A Brief Overview of Routing In Angular

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].