Lazy Loading در Angular
شناسه پست: 3914
بازدید: 96

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

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

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

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

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

دو تفاوت کوچک بین این فایل ماژول و فایل ماژول 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 شروع میکنیم:

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

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

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

با بخش اصلاح شده کد، ما در حال تنظیم 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 را تغییر دهیم:

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

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

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

Angular Lazy Loading در Owner Component

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

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

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

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

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

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

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

ما می‌توانیم این فایل 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 واحد ایجاد خواهیم کرد.

نویسنده

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