ساختار پروژه‌ی انگولاری (ماژول‌ها و کامپوننت‌ها)

24 اسفند 1398

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

ماژول ها در انگولار

ماژول ها یک اپلیکیشن را به بلوک های منسجمی از ویژگی ها تبدیل می کنند. ماژول ها این کار را به وسیله ی کامپوننت ها، سرویس ها، دارکتیوها و پایپ ها انجام می دهند.

اپلیکیشن های انگولار، دارای پایه ی ماژولی هستند، یعنی از قسمت های کوچک تشکیل شده اند. هر اپلیکیشن انگولاری دارای حداقل یک ماژول است که به آن ماژول اصلی یا root module یا AppModule گفته می شود. root module می تواند تنها ماژول موجود در یک اپلیکیشن کوچک باشد. اما اپلیکیشن ها دارای تعداد زیادی ماژول دیگر نیز هستند. به عنوان یک توسعه دهنده و برنامه نویس، به شما بستگی دارد که چند ماژول را می خواهید در برنامه ی خود استفاده کنید.

بگذارید راحت تر بگوییم. شما چهار قسمت عمده در سیستم خود دارید. هر قسمت ماژول مخصوص به خود را (علاوه بر ماژول اصلی) دارد. پس در کل می شود پنج ماژول.

هر ماژول در انگولار، یک کلاس با دکوراتور NgModule@ می باشد. دکوراتورها توابعی هستند که کلاس های جاوا اسکریپت را مشخص می کنند. از آن ها برای پیوست کردن متادیتا به کلاس ها استفاده می شود تا به کلاس ها بگویند که چگونه پیکربندی شده و کار کنند. به عبارت دیگر دکوراتورها توابعی هستند، که تابع دیگری را دریافت می‌کنند و رفتار آن را تغییر می‌دهند.

پراپرتی هایی از دکوراتور NgModule@ که ماژول را تعریف می کند، عبارت اند از:

  • declarations: کلاس هایی که به این ماژول تعلق دارند و مربوط به نماها هستند. در انگولار سه کلاس وجود دارد که می توانند نماها را شامل شوند. کلاس های components ،directives و pipes .
  • exports: کلاس هایی که باید توسط کامپوننت های دیگر قابل دسترسی باشند.
  • imports: ماژول هایی که کلاس های آن ها توسط اجزای این ماژول موردنیاز است.
  • providers: سرویس های موجود در یکی از ماژول هایی که در ماژول ها یا کامپوننت های دیگر مورد استفاده قرار می گیرند. وقتی سرویسی درون یک provider قرار می گیرد، از تمام قسمت های اپلیکیشن قابل دسترسی است.
  • bootstrap: کامپوننت اصلی یا root component نمای اصلی اپلیکیشن را در بر دارد. فقط root module دارای این پراپرتی است. این موضوع نشان می دهد که این کامپوننت قرار است که با بوت استرپ دیزاین شود.
  • entryComponents: یک entryComponent می تواند هر کامپوننتی باشد که ضرورتا توسط خود انگولار لود می شود. (یعنی شما آن را در قالب اپلیکیشن خود فراخوانی نکرده اید)

کامپوننت های انگولار

کامپوننت ها، ابتدایی ترین بلوک های سازنده ی رابط کاربری اپلیکیشن انگولاری هستند. یک کامپوننت، کنترل کننده ی یک یا چند بخش از نمای اپلیکیشن است. همان بخش هایی که قبلا به آن ها «نما» می گفتیم.

برای مثال در اپلیکیشنی که قرار است بسازیم، کامپوننت های AppComponent ،CategoriesComponent ،CategoryQuestionsComponent QuestionAnswersComponent و چند کامپوننت دیگر را خواهیم داشت.

یک کامپوننت به تنهایی شامل بخش قابل بازیابی در رابط کاربری است که از سه بخش تشکیل شده است:

  • یک بخش از جنس اچ تی ام ال که به آن نما می گفتیم.
  • یک کلاس که اطلاعاتی در خصوص فعل و انفعالات نما را در خود نگه می دارد. این نحوه ی فعل و انفعالات، از طریق API های پراپرتی ها، و متدهای معماری انگولار، به نما اختصاص می یابد. (یک کلاس که نحوه ی عمل کردن نما را مشخص می کند یا جایی که منطق ها یا logic های مربوط به  اپلیکیشن را در ان می نویسیم)
  • و المان اچ تی ام ال فوق الذکر که سلکتور selector هم نامیده می شود.

دکوراتور Component@ که ما برای پردازش متا دیتای اضافی تعیین کردیم، در زمان اجرا یا runtime مورد استفاده قرار می گیرد. برای مثال ما یک قالب اچ تی ام ال مربوط به نما را قرار دادیم، سپس ما یک سلکتور اچ تی ام ال را که می خواستیم در کامپوننت استفاده شود، قرار دادیم. همچنین ویژگی های ظاهری کامپوننت خود را در یک stylesheet تعریف کردیم.

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

  • دریافت و نمایش مقادیر و اطلاعات به کاربر
  • تغییر استایل المان ها در حین استفاده از اپلیکیشن
  • پاسخ به کلیک یا هر عمل دیگر کاربر (پویا سازی اپلیکیشن)

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

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

بهتر است که اپلیکیشن شما از کامپوننت های متعددی تشکیل شده باشد. یعنی هر رابط کاربری را در یک کامپوننت جدا قرار دهیم. می پرسید چرا؟ تصور  کنید که ما دو عدد بلوک رابط کاربری متفاوت، در یک کامپوننت خاص (در یک فایل) داشته باشیم. در ابتدا هر یک از این رابط های کاربری کوچک هستند اما کم کم پیچیده تر شده و رشد می کنند. آن زمان است که ما تشخیص این که کدام دستورات و کدها متعلق به کدام رابط کاربری است، برای ما مشکل می شود. با این وجود، هر تغییر در کدهای اپلیکیشن هر دو مؤلفه را در معرض خطر قرار می دهد و ریسک را در تست کردن نرم افزار، بدون هیچ گونه مزایایی دو برابر می کند. اگر بخواهیم که یک رابط کاربری را در جای دیگری نیز استفاده کنیم، رابط کاربری دیگر هم به آن چسبیده خواهد بود، چرا که هر دوی آن ها درون یک کامپوننت هستند.

این سناریو، اصل مسئولیت محدود را برای هر کامپوننت نقض می کند. شاید فکر کنید که رعایت این اصل فقط یک پیشنهاد است اما باید توجه داشته باشید که برای دریافت بهترین بازخورد باید کارها را در کدنویسی با انگولار درست انجام دهید. خود انگولار نیز ساخت اپلیکیشن با توجه به اصل «مسئولیت محدود برای هر کامپوننت» را تشویق می کند.

یک اپلیکیشن انگولار شبیه به یک درخت تشکیل شده از شاخه هایی از جنس کامپوننت است (درختی از کامپوننت ها). توجه داشته باشید که کامپوننت های معینی «modal components» درون کامپوننت های مادر «parent component» قرار گرفته اند. زیرا آن ها کامپوننت های ضروری ای هستند که در کامپوننت اچ تی ام ال اپلیکیشن تعریف نشده اند. مانند شکل زیر:

ساختار درختی اپلیکیشن های انگولاری

خب! به پایان قسمت چهارم رسیدیم. در این جلسه راجع به کامپوننت ها و ماژول ها در انگولار صحبت کردیم. با ما در قسمت های پایانی نیز همراه باشید تا این نامه را به سر انجام برسانیم!


منبع: سایت Angular Templates

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش مقدماتی انگولار توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ن ر
09 بهمن 1399
سلام و خسته نباشید تشکر می کنم بابت آموزش رایگانتون. فقط ای کاش اصطلاحات رو ترجمه نکنید. برگه چیه؟ واقعا من متوجه نمی شم. زبان برنامه نویسی استاندارد هست و نیاز به ترجمه نداره. کسی که بخواد برنامه نویسی کنه باید مفاهیم رو به همون زبان انگلیسی یاد بگره چون ما فارسی کد نمی زنیم. ممنونم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Habib PourKhanLar Ahmadi
13 اردیبهشت 1399
مطالب این بخش و بخش سوم بهتر بود همراه با شکل های بیشتری، مربوط به هر بخش توضیح داده شوند چون باعث گیج شدن فردی که برای اولین بار است به این سمت میآید میشود.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.