Scribd
Upload
11 views6 pages

MPTPR 19

The document outlines the steps to implement lazy loading in an Angular application for customer and sales order data. It includes generating modules and components, updating their configurations, and creating a data service to fetch data. Additionally, it provides routing configuration for lazy loading and displays the data in respective components.

Uploaded by

harshkapupara2007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views6 pages

MPTPR 19

The document outlines the steps to implement lazy loading in an Angular application for customer and sales order data. It includes generating modules and components, updating their configurations, and creating a data service to fetch data. Additionally, it provides routing configuration for lazy loading and displays the data in respective components.

Uploaded by

harshkapupara2007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Modern Practical Tools(4340705) 20______

-:Practical 19:-

Aim: Design a page to load customer and Sales order data using lazy loading
technique in angular.

Lazy loading is a technique used in Angular to optimize the loading time of large applications
by loading only the necessary components and modules when they are required, rather than
loading everything upfront.

In a typical Angular application, all the components and modules are loaded when the
application is first launched. This can slow down the initial loading time of the application,
especially if the application is large and contains many components and modules. With lazy
loading, the application can be divided into smaller feature modules, each of which is loaded
only when the user navigates to the corresponding route.

Step 1: Generate the customer module: Run the following command in your terminal to
generate a new module for customers:

ng generate module customers

Step 2: Update customer module as below:

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


import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';

@NgModule({
declarations: [
CustomerListComponent
],
imports: [
CommonModule,
CustomersRoutingModule
]
})
export class CustomersModule { }

Step 3: Generate the customer list component: Run the following command in your
terminal to generate a new component for displaying the customer list:

ng generate component customers/customer-list

Compiled by: AHH Page


Modern Practical Tools(4340705) 20______

Step 4: Update customer-list.component.ts as below for loading the customer data:

import { Component, OnInit } from '@angular/core';


import { DataService } from '../../data.service';

@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
customers: any[] = [];
isLoading = false;

constructor(private dataService: DataService) { }

ngOnInit() {
this.loadCustomers();
}

loadCustomers() {
this.isLoading = true;
this.dataService.getCustomers().subscribe((customers: any[]) => {
this.customers = customers;
this.isLoading = false;
});
}
}

Step 5: In the customer-list.component.html file, display the customer data:

<div *ngIf="isLoading">
Loading customers...
</div>
<div *ngIf="!isLoading">
<h2>Customers</h2>
<ul>
<li *ngFor="let customer of customers">{{ customer.name }}</li>
</ul>
</div>

Compiled by: AHH Page


Modern Practical Tools(4340705) 20______

Step 5: Generate the sales module: Run the following command in your terminal to
generate a new module for sales:

ng generate module sales

Step 6: Update sales module as below:

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


import { CommonModule } from '@angular/common';
import { SalesRoutingModule } from './sales-routing.module';
import { SalesOrderListComponent } from './sales-order-list/sales-order-list.component';

@NgModule({
declarations: [
SalesOrderListComponent
],
imports: [
CommonModule,
SalesRoutingModule
]
})
export class SalesModule { }

Step 7: Generate the sales order list component: Run the following command in your
terminal to generate a new component for displaying the sales order list:

ng generate component sales/sales-order-list

Step 8: Update sales-order-list.component.ts as below for loading the customer data:

import { Component, OnInit } from '@angular/core';


import { DataService } from '../../data.service';

@Component({
selector: 'app-sales-order-list',
templateUrl: './sales-order-list.component.html',
styleUrls: ['./sales-order-list.component.css']
})
export class SalesOrderListComponent implements OnInit {
salesOrders: any[] = [];
isLoading = false;
Compiled by: AHH Page
Modern Practical Tools(4340705) 20______

constructor(private dataService: DataService) { }

ngOnInit() {
this.loadSalesOrders();
}

loadSalesOrders() {
this.isLoading = true;
this.dataService.getSalesOrders().subscribe((salesOrders: any[]) => {
this.salesOrders = salesOrders;
this.isLoading = false;
});
}
}

Step 9: In the sales-order-list.component.html file, display the customer data:

<div *ngIf="isLoading">
Loading sales orders...
</div>
<div *ngIf="!isLoading">
<h2>Sales Orders</h2>
<ul>
<li *ngFor="let order of salesOrders">{{ order.orderNumber }}</li>
</ul>
</div>

Step 10: Create a data service to fetch the customer and sales order data: Run the
following command in your terminal to create a new service:

ng generate service data

Step 11: This will create a new file called data.service.ts in the src/app directory. Replace
its content with the following code:

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


import { Observable, of } from 'rxjs';

@Injectable({

Compiled by: AHH Page


Modern Practical Tools(4340705) 20______

providedIn: 'root'
})
export class DataService {
getCustomers(): Observable<any[]> {
// Replace with the actual logic to fetch customer data
return of([
{ id: 1, name: 'Janak' },
{ id: 2, name: 'Rekha' },
{ id: 3, name: 'Mayank' },
{ id: 4, name: 'Pratibha' },
{ id: 5, name: 'Vinayak' }
]);
}

getSalesOrders(): Observable<any[]> {
// Replace with the actual logic to fetch sales order data
return of([
{ orderNumber: 'SO-001', total: 100 },
{ orderNumber: 'SO-002', total: 200 },
{ orderNumber: 'SO-003', total: 300 },
{ orderNumber: 'SO-004', total: 400 },
{ orderNumber: 'SO-005', total: 500 }
]);
}
}

Step 12: Update the routing configuration to enable lazy loading: Open the app-
routing.module.ts file and update it as follows:

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


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

const routes: Routes = [


{ path: 'customers', loadChildren: () => import('./customers/customers.module').then(m
=> m.CustomersModule) },
{ path: 'sales', loadChildren: () => import('./sales/sales.module').then(m =>
m.SalesModule) },
{ path: '', redirectTo: '/sales', pathMatch: 'full' },
{ path: '**', redirectTo: '/customers' }
];
Compiled by: AHH Page
Modern Practical Tools(4340705) 20______

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Step 13: Open the app.component.html file and replace its content with the following
line:

<router-outlet></router-outlet>

Compiled by: AHH Page

You might also like