ساخت داشبورد سازمانی مقیاس پذیر با انگولار – بخش اول


بسیاری از توسعهدهندگان حرفهای یا تاکنون نیازمند ساخت یک داشبورد برای وبسایت شرکتشان بودهاند و یا در آینده مجبور به چنین کاری خواهند شد. در این مقاله یک روش خاص برای ساخت داشبورد مقیاسپذیر سازمانی با انگولار را بررسی میکنیم که محتوا را از داشبورد مستقل نگه میدارد.
اگر در زمینه انگولار تاره کار محسوب میشوید، پیشنهاد میکنیم با مراجعه به آموزش زیر با این فریمورک محبوب جاوا اسکریپت بیشتر آشنا شوید:
در اغلب موارد ما میخواهیم داشبوردهایی بسازیم که خود داشبورد از کامپوننتهایش کاملاً مستقل باشد. در این حالت هر یک از کارتهای داشبورد میتوانند کامپوننتهای دینامیکی داشته باشند که بدون ارجاع مستقیم در قالب داشبورد به وجود آمده باشند. در ابتدا پیشنهاد میکنیم این راهنمای وبسایت رسمی انگولار (+) را مطالعه کنید تا در این زمینه اطلاعات بیشتری کسب کنید. با این که آن راهنما نشان نمیدهد که چگونه میتوان چند کامپوننت را بارگذاری کرد. همچنین لازم است که داشبورد دادهها را به کامپوننتهای دینامیک وصل کند که موجب پیچیده شدن اپلیکیشن در عمل میشود. در این مقاله این اشکالات راهبرد مقاله فوق را اصلاح میکنیم.
شروع
نخستین کاری که باید انجام دهید ایجاد یک ماژول feature برای میزبانی همه موارد مرتبط با داشبورد است. همچنین باید کامپوننت داشبورد را ایجاد کنید. این همان جایی است که همه اکشنها اتفاق میافتند.
در داشبورد یک متغیر به نام tracks اعلان میکنیم. این متغیر اطلاعات مرتبط نگهداری شده و همچنین آیتمهای متعلق به هر ترک را مورد ردگیری قرار میدهد.
فایل dashboard.component.ts
فایل item.ts
فایل track.ts
به رشته بودن مشخصه روی Item توجه کنید. این کار عامدانه بوده است و در بخش بعدی در مورد آن بیشتر توضیح میدهیم. همچنین آیتمها را در قالب داشبورد نمایش میدهیم.
فایل dashboard.component.html
بارگذاری محتوا به صورت دینامیک
در این بخش به بررسی بارگذاری کامپوننتها روی داشبورد بدون ارجاع مستقیم به کامپوننتها میپردازیم.
برای بارگذاری کامپوننتها به صورت دینامیک باید یک ارجاع به ViewContainerRef برای هر قالب آیتم داشته باشیم. بری دسترسی به آن یک دایرکتیو ایجاد میکنیم که در این مورد آن را dashboardOutlet نامیدهایم و ViewContainerRef را به سازنده اضافه میکنیم و یک ()Input@ نیز برای آیتم قرار میدهیم.
فایل dashboard-outlet.directive.ts
سپس عبارت item.id را از فایل dashboard.component.html به همراه تگ ng-template حذف میکنیم. سپس دایرکتیو dashboard-outlet را به ng-template اضافه کرده و دادههای آیتم را به دایرکتیو آیتم متصل میکنیم.
فایل dashboard.component.html
اکنون پیش از آن که کامپوننتهای محتوا را در داشبورد رندر کنیم باید چند کار دیگر را انجام دهیم.
ابتدا یک کامپوننت dashboardCard و یک کامپوننت dashboardCardContainer ایجاد میکنیم که هر کارت داشبورد و کانتینر والد آن بسط مییابند و به ما امکان داشتن یک مجموعه مشترک از متغیرها و رویدادهای متصل را میدهند. DashboardCardContainer باید یک آیتم ()Input@ داشته باشد که ارجاعی به خود آیتم را نگهداری میکند. دلیل این کار آن است که کانتینر همه فراخوانیهای سرویس و بازیابی دادهها را برای کامپوننت ارائه انجام میدهد. فعلاً این موارد صرفاً کامپوننتهای خالی هستند.
فایل dashboard-card.container.ts
میزبانی از کامپوننتها
سپس باید محلی برای میزبانی از کامپوننتهایی داشته باشیم که روی داشبورد حضور ندارند. به این منظور یک فایل ایجاد کرده و یک شیء به نام dashboardCards را اکسپورت میکنیم. dashboardCards شیئی است که یک رشته را به یک کامپوننت داشبورد نگاشت میکند. بدین ترتیب میتوانیم یک رشته به آن بدهیم و یک کامپوننت جهت رندر به ما بازمیگرداند. همچنین باید یک enum برای نگهداری ارجاعی به هر رشته ایجاد کنیم تا بدین ترتیب بتوانیم از امکان تکمیل خودکار در زمان ساخت آیتمها روی شیء track بهره بگیریم.
فایل dashboard-cards.ts
فایل dashboard-cards.enum.ts
با استفاده از این ارجاعها میتوانیم بدون نیاز به وجود ارجاع مستقیم داشبورد به کامپوننتهای قالب، کامپوننتهای محتوا را مورد ارجاع قرار دهیم.
اگر به کامپوننت داشبورد بازگردیم، اینک باید ارجاعی به همه قالبهایی که از حلقههای ngFor* ایجاد میشوند داشته باشیم. این وضعیت با استفاده از کوئری کردن ViewChildren@ برای دایرکتیو DashboardOutlet میسر میشود.
فایل dashboard.component.ts
با استفاده از این ارجاع میتوانیم اینک کامپوننتها را در داشبورد بارگذاری کنیم. این وضعیت با بهرهگیری از متدی به نام loadContent ممکن میشود. این متد دو پارامتر میگیرد که یکی قالبی از نوع DashboardOutletDirective و دیگری آیتمی با نام آیتم نوع است. سپس از ComponentFactoryResolver در متد loadContent استفاده میکنیم تا محتوا را در قالب ایجاد و رندر کنیم. همچنین متد دیگری به نام loadContents ایجاد میکنیم که روی همه قالبهای ارائهشده از سوی ViewChildren@ میچرخد و آن را به loadContent ارسال میکند.
- فایل dashboard.component.ts
افزودن آیتمها به track
لازم به اشاره است که ما به changeDetectorRef اعلام کردهایم تغییرات را تشخیص دهد (detectChanges) زیرا DOM را بهروزرسانی کردهایم. بدون این فراخوانی با خطا مواجه میشویم و یا با نتایج ناخواستهای مواجه خواهیم شد.
در نهایت تنها کاری که باید انجام دهیم این است که به داشبورد برویم و آیتمها را به track-ها اضافه کنیم و loadContents را در ()ngAfterViewInit فراخوانی نماییم.
فایل dashboard.component.ts
بدین ترتیب کار ما در این مرحله به پایان میرسد. اکنون یک داشبورد با کارکرد دینامیک داریم که مستقل از محتوایش رندر میشود.
در بخش دوم این راهنما به بررسی شیوه پیادهسازی قابلیت «کشیدن و رها کردن» (drag and drop) در عین حفظ حالت (State)، چگونگی اجرای فراخوانیهای سرویس برای کارتهای منفرد و شیوه اضافه/حذف کردن آیتمها از track-ها در زمان اجرا میپردازیم. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- آموزش مقدماتی AngularJS برای ساخت اپلیکیشنهای تکصفحهای
- مجموعه آموزشهای برنامهنویسی
- کامپوننت کانتینری در انگولار (Angular) — از صفر تا صد
- ساخت رابط کاربری Login با انگولار (Angular) و متریال دیزاین – به زبان ساده
==