Lazy Loading در Angular - آموزش برنامه نويسی و طراحی سايت اكسپرت ماركت

در ادامه پست قبلی (جایی که نحوه استفاده از subscription را یاد گرفتیم)، اکنون قصد داریم آن subscription را در درخواست های HTTP خود پیاده سازی کنیم تا داده ها را در صفحه نمایش دهیم. علاوه بر این، ما می‌خواهیم مزیت Angular Lazy Loading را با استفاده از ماژول دیگری در برنامه خود استفاده کنیم – ماژول owner.

اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.

ایجاد یک Module جدید

بنابراین با دستور Angular CLI زیر، یک ماژول جدید ایجاد میکنیم:

ng g module owner --routing=true --module app.module

1	ng g module owner --routing=true --module app.module

این دستور چندین کار انجام می دهد. یک ماژول Owner جدید ایجاد می کند، همچنین یک فایل مسیریابی برای این ماژول ایجاد می کند، و در نهایت، فایل ماژول App را به روز می کند:

CREATE src/app/owner/owner-routing.module.ts (248 bytes)
CREATE src/app/owner/owner.module.ts (276 bytes)
UPDATE src/app/app.module.ts (989 bytes)

CREATE src/app/owner/owner-routing.module.ts (248 bytes)

CREATE src/app/owner/owner.module.ts (276 bytes)

UPDATE src/app/app.module.ts (989 bytes)

فایل owner.module.ts را با یکدیگر بررسی میکنیم:

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

import { OwnerRoutingModule } from './owner-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    OwnerRoutingModule
  ]
})
export class OwnerModule { }

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

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

import { OwnerRoutingModule } from './owner-routing.module';

@NgModule({

declarations: [],

imports: [

CommonModule,

OwnerRoutingModule

]

})

export class OwnerModule { }

دو تفاوت کوچک بین این فایل ماژول و فایل ماژول app وجود دارد. اولین تفاوت این است که در فایل ماژول app یک دستور import برای BrowserModule و در فایل ماژول owner، یک دستور import برای CommonModule داریم. دلیل آن این است که BrowserModule فقط به ماژول root در برنامه مربوط می شود.

تفاوت دوم این است که ما آرایه providers را در فایل ماژول owner نداریم. این به این دلیل است که ما باید تمام service ها را در ماژول root ثبت کنیم. به این ترتیب component ها، همان نمونه service را تنها یک بار تزریق می کنند و شما می توانید state را در service خود نگه دارید.

البته، اگر واقعاً بخواهیم یک service را در هر ماژول فرزند ثبت کنیم، می‌توانیم آرایه providers را اضافه کنیم. اما، با انجام این کار، نمی‌توانیم state را در service خود حفظ داریم، زیرا هر بار که یک نمونه جدید از آن component ایجاد می‌کنیم، نمونه جدیدی از یک service ایجاد می‌شود.

در نهایت، میتوانیم ببینیم که این ماژول، OwnerRoutingModule را از یک فایل جداگانه import می کند.

کامپوننت Owner و Angular Lazy Loading

با ایجاد فایل های کامپوننت owner شروع میکنیم:

ng g component owner/owner-list --skip-tests

1	ng g component owner/owner-list --skip-tests

این دستور قرار است ساختار پوشه مورد نیاز را ایجاد کند و این component را در فایل owner.module.ts نیز import کند.

آنچه اکنون می خواهیم این است که زمانیکه روی منوی «Owner-Actions» کلیک می کنیم، محتوای فایل HTML این component را نمایش دهیم. بنابراین ابتدا، فقط جهت آزمایش، اجازه دهید فایل owner.component.html را با افزودن یک پاراگراف (برچسب <p>) تغییر دهیم:

<p>This is owner-list component page.</p>

1	<p>This is owner-list component page.</p>

پس از آن، فایل app-routing.module.ts را به این صورت تغییر میدهیم:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'owner', loadChildren: () => import('./owner/owner.module').then(m => m.OwnerModule) },
  { path: '404', component: NotFoundComponent }, 
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/404', pathMatch: 'full' }
];

const routes: Routes = [

{ path: 'home', component: HomeComponent },

{ path: 'owner', loadChildren: () => import('./owner/owner.module').then(m => m.OwnerModule) },

{ path: '404', component: NotFoundComponent },

{ path: '', redirectTo: '/home', pathMatch: 'full' },

{ path: '**', redirectTo: '/404', pathMatch: 'full' }

];

با بخش اصلاح شده کد، ما در حال تنظیم app-routing.module هستیم تا هر زمان که، کسی به http://localhost:4200/owner endpoint رفت، ماژول owner بارگزاری شود. همانطور که متوجه شدیم، ما از ویژگی loadChildren استفاده می کنیم، به این معنی که ماژول owner به همراه component های مربوط به آن بارگذاری نمی شود تا زمانی که به صراحت آنها را درخواست کنیم. با انجام این کار، lazy loading در Angular را از محتوای ماژول owner تنظیم می کنیم.

حالا اگر به صفحه اصلی برویم، منابع را فقط از ماژول root دریافت می کنیم، نه از ماژول owner. و تنها با رفتن به منوی owner-actions، منابع ماژول owner را به داخل برنامه بارگذاری می کنیم. با توجه به این گفته، می‌توان فهمید که چرا lazy loading در Angular برای برنامه‌های Angular مهم است.

Routing برای ماژول Owner

اکنون، برای فعال کردن navigation به کامپوننت OwnerList، باید owner-routing.module.ts را تغییر دهیم:

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

import { OwnerListComponent } from './owner-list/owner-list.component';

const routes: Routes = [
  { path:'list', component: OwnerListComponent }
];

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

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

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

import { OwnerListComponent } from './owner-list/owner-list.component';

const routes: Routes = [

{ path:'list', component: OwnerListComponent }

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class OwnerRoutingModule { }

با این تنظیمات، ما OwnerListComponent خود را در http://localhost:4200/owner/list endpoint نشان می دهیم. علاوه بر این، ما اینجا از تابع RouterModule.forChild استفاده می کنیم و نه از تابع forRoot. این به این دلیل است که ما باید از تابع forRoot فقط در ماژول root اپلیکیشن استفاده کنیم.

حال باید فایل menu.component.html را اصلاح کنیم:

<div class="collapse navbar-collapse" id="collapseNav" [collapse]="!isCollapsed" [isAnimated]="true">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/owner/list']" routerLinkActive="active" 
      [routerLinkActiveOptions]="{exact: true}"> Owner Actions </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Account Actions </a>
    </li>
  </ul>
</div>

<a class="nav-link" [routerLink]="['/owner/list']" routerLinkActive="active"

[routerLinkActiveOptions]="{exact: true}"> Owner Actions </a>

</li>

<a class="nav-link" href="#">Account Actions </a>

</li>

</ul>

</div>

پس از تمام این تغییرات، می‌توانیم برنامه خود را اجرا کنیم و روی لینک Owner Actions کلیک کنیم. به محض انجام این کار، component جدید ما نشان داده می شود و active style بر روی ویژگی class لینک اعمال میشود:

اکنون می دانیم که چگونه routing را برای ماژول فرزند و همچنین برای component داخل آن ماژول تنظیم کنیم.

Subscription و نمایش داده ها

وقتی به منوی Owner Actions می‌رویم، می‌خواهیم همه owner ها را به کاربر نشان دهیم. بنابراین این بدان معناست که وقتی کامپوننت owner بارگیری می شود، برنامه به طور خودکار همه owner ها را از سرور دریافت می کند.

ما قبلاً اینترفیس Owner خود را ایجاد کرده ایم (از پست قبلی) و از آن در اینجا استفاده خواهیم کرد.

با این اوصاف، اجازه دهید فایل OwnerListComponent را اصلاح کنیم:

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

import { Owner } from './../../_interfaces/owner.model';
import { OwnerRepositoryService } from './../../shared/services/owner-repository.service';

@Component({
  selector: 'app-owner-list',
  templateUrl: './owner-list.component.html',
  styleUrls: ['./owner-list.component.css']
})
export class OwnerListComponent implements OnInit {
  owners: Owner[];

  constructor(private repository: OwnerRepositoryService) { }

  ngOnInit(): void {
    this.getAllOwners();
  }

  private getAllOwners = () => {
    const apiAddress: string = 'api/owner';
    this.repository.getOwners(apiAddress)
    .subscribe(own => {
      this.owners = own;
    })
  }

}

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

import { Owner } from './../../_interfaces/owner.model';

import { OwnerRepositoryService } from './../../shared/services/owner-repository.service';

@Component({

selector: 'app-owner-list',

templateUrl: './owner-list.component.html',

styleUrls: ['./owner-list.component.css']

})

export class OwnerListComponent implements OnInit {

owners: Owner[];

constructor(private repository: OwnerRepositoryService) { }

ngOnInit(): void {

this.getAllOwners();

}

private getAllOwners = () => {

const apiAddress: string = 'api/owner';

this.repository.getOwners(apiAddress)

.subscribe(own => {

this.owners = own;

})

}

ما اینجا ویژگی owners را داریم که از نوع آرایه است. در مرحله بعد، تابع subscribe را اجرا می کنیم، که قرار است این ویژگی را با تمام owner ها از سرور پر کند. استفاده از این ویژگی owners برای ایجاد صفحه HTML ما، چیزی است که ما میخواهیم.

برای انجام آن، اجازه دهید کامپوننت HTML را اصلاح کنیم:

<div class="row">
  <div class="offset-10 col-md-2 mt-2"> <a href="#">Create owner</a> </div>
</div> <br>
<div class="row">
  <div class="col-md-12">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Owner name</th>
            <th>Owner address</th>
            <th>Date of birth</th>
            <th>Details</th>
            <th>Update</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let owner of owners">
            <td>{{owner.name}}</td>
            <td>{{owner.address}}</td>
            <td>{{owner.dateOfBirth | date: 'dd/MM/yyyy'}}</td>
            <td><button type="button" id="details" class="btn btn-primary">Details</button></td>
            <td><button type="button" id="update" class="btn btn-success">Update</button></td>
            <td><button type="button" id="delete" class="btn btn-danger">Delete</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="offset-10 col-md-2 mt-2"> <a href="#">Create owner</a> </div>

</div> <br>

<thead>

<tr>

<th>Owner name</th>

<th>Owner address</th>

<th>Date of birth</th>

<th>Details</th>

<th>Update</th>

<th>Delete</th>

</tr>

</thead>

<tbody>

<td>{{owner.name}}</td>

<td>{{owner.address}}</td>

<td>{{owner.dateOfBirth | date: 'dd/MM/yyyy'}}</td>

<td><button type="button" id="details" class="btn btn-primary">Details</button></td>

<td><button type="button" id="update" class="btn btn-success">Update</button></td>

<td><button type="button" id="delete" class="btn btn-danger">Delete</button></td>

</tr>

</tbody>

</table>

</div>

ما می‌توانیم این فایل html را به دو component تقسیم کنیم (component اصلی: OwnerList و component فرزند Owner). اما از آنجایی که نحوه استفاده از component های فرزند را هنوز توضیح ندادیم، که در پست های بعدی این کار را خواهیم داد، فعلاً آن را به همین صورت رها می کنیم.

ما از برخی کلاس‌های پایه Bootstrap برای ایجاد جدولی که داده‌های owner را نشان می‌دهد استفاده می‌کنیم. در داخل این جدول، بر روی تمام owner ها با استفاده از دستور ngFor* حلقه میزنیم. سپس با استفاده از interpolation {{}}، ویژگی های owner را در صفحه نشان می دهیم. برای ویژگی dateOfBirth، ما فقط از Date pipe | date: 'dd/MM/yyyy' استفاده می کنیم تا آن را طوری قالب بندی کنیم که می خواهیم روی صفحه نمایش ببینیم.

در برنامه خود، ما قرار است از قالب تاریخ به صورت MM/dd/yyyy استفاده کنیم، اما در اینجا می‌خواهیم از dd/MM/yyyy فقط برای نشان دادن راه تغییر قالب با pipe ها بدون هیچگونه تلاش زیادی استفاده کنیم.

اکنون، ما می توانیم برنامه سرور خود را راه اندازی کنیم. هنگامی که آن را استارت میزنیم، می توانیم برنامه Angular خود را اجرا کرده و به پیوند Owner Actions برویم:

نتیجه گیری

با خواندن این پست یاد گرفتیم که چگونه یک module جدید ایجاد کرده و از چه import هایی استفاده کنیم. علاوه بر این، راه پیکربندی Angular lazy loading و اینکه چگونه می تواند به برنامه ما کمک کند را یاد گرفته ایم.

همچنین، اکنون می‌دانیم که چگونه درخواست HTTP را با یک subscription اجرا کرده و داده‌های نتیجه را در صفحه نمایش دهیم، و همچنین نحوه قالب‌بندی مجدد تاریخ را هنگام نمایش آن نیز یاد گرفتیم.

در قسمت بعدی این آموزش گام به گام، من قصد دارم روش مدیریت خطا در هنگام ارسال درخواست های HTTP را به شما نمایش دهم. علاوه بر این، ما یک صفحه Details را برای یک owner واحد ایجاد خواهیم کرد.

حسین گفت:

بهمن 15, 1402 در 9:44 ق.ظ

عالی بود

پاسخ
1. امید عباسیمدیر گفت:
  
  بهمن 23, 1402 در 6:41 ق.ظ
  ممنون
  پاینده باشید
  پاسخ

لغو پاسخ

ممنون پاينده باشيد

سلام احتمالا جايي در كدتان اشتباه عمل كرديد. اين خطا معمولا به دليل استفاده از كلاس IdentityUser به جاي استفاده…

عالی بود

با سلام من یه پروژه دات نت کور داریم می نویسم و به این خطا برمی خوردم زمانیکه درون ادرس…

سلام ودرود طبق تحقيقي كه در رابطه با elanat انجام دادم، اين يك cms است كه بر اساس asp.net core…