معرفی ماژول‌ها آنگولاری

معرفی ماژول‌ها

برنامه‌های Angular پیمانه‌ای یا ماژولار هستند و Angular سیستم پیمانه‌ای مخصوص به خود تحت عنوان NgModule را دارد. NgModule ها نگهدارنده هایی برای یک بلوک به هم پیوسته از کدهای اختصاص داده شده به یک دامنه، جریان کار و یا مجموعه‌ای از قابلیت‌های با ارتباط نزدیک به هم از برنامه هستند. این ماژول‌ها می‌توانند شامل کامپوننت، ارائه دهنده‌ی سرویس و فایل‌های کدی دیگر باشند که محدوده‌ی آن‌ها توسط این ماژول‌ها تعریف شده است. این ماژول‌ها می‌توانند کارکردی که از NgModule دیگر صادر شده است را وارد کنند و کارکرد انتخاب شده را صادر کنند تا NgModule های دیگر بتوانند از آن استفاده کنند.
هر برنامه‌ی Angular حداقل یک کلاس NgModule موسوم به ماژول اصلی (root module) دارد. اسم این کلاس به صورت قراردادی AppModule است و در فایلی به نام app.module.ts قرار می‌گیرد. برای آن که برنامه‌ی خود را راه اندازی کنید باید NgModule اصلی را بوت استرپ کنید.
با وجود اینکه یک برنامه‌ی کوچک ممکن است تنها یک NgModule داشته باشد، اما اغلب برنامه‌ها ماژول‌های بسیار بیشتری دارند. NgModule اصلی یک برنامه اصطلاحاً این اسم را دارد زیرا می‌تواند در سلسله مراتبی با هر عمق، NgModule های فرزند را شامل شود.

متادیتاهای NgModule

NgModule ها توسط کلاسی که دارای دکوراتور @NgModule() است تعریف می‌شوند. این دکوراتور تابعی است که تنها یک شیء متادیتا را می‌گیرد، به گونه‌ای که ویژگی‌های این شیء بیانگر ماژول هستند. مهم‌ترین این ویژگی‌ها را می‌توانید در زیر مشاهده کنید.

• declarations: کامپوننت ها، دستورالعمل‌ها و پایپ‌هایی که به این NgModule متعلق هستند.
• exports: زیرمجموعه‌ای از اعلانات که بایستی در قالب‌های کامپوننت NgModule های دیگر مشهود و قابل استفاده باشند.
• imports: ماژول‌های دیگری که قالب‌های کامپوننت اعلان شده در این NgModule به کلاس‌های صادر شده‌ی آن‌ها نیاز دارند.
• Providers: ایجاد کننده‌ی سرویس‌هایی که این NgModule در اختیار جمع آوری سراسری سرویس‌ها قرار می‌دهد. این سرویس‌ها در دسترس تمامی بخش‌های برنامه قرار می‌گیرند. (معمولاً بهتر است که ارائه دهنده‌ها را در سطح کامپوننت مشخص کنید.)
• bootstrap: view اصلی برنامه به نام کامپوننت اصلی که میزبان view های دیگر برنامه است. تنها NgModule اصلی می‌تواند ویژگی بوت استرپ را تنظیم کند.

در ادامه می‌توانید تعریف ساده‌ی NgModule اصلی را مشاهده کنید.

src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
 imports: [BrowserModule],
 providers: [Logger],
 declarations: [AppComponent],
 exports: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule { }

ویژگی export مربوط به AppComponent برای مقاصد آموزشی لحاظ شده است و الزامی در بودن آن در این مسئله وجود ندارد. دلیلی وجود ندارد که یک NgModule اصلی چیزی را صادر کند، زیرا ماژول‌های دیگر نیازی به وارد کردن NgModule اصلی ندارند.

NgModule ها و کامپوننت ها

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

یک کامپوننت و قالب آن در کنار یکدیگر، یک view را تعریف می‌کنند. یک کامپوننت می‌تواند شامل سلسله مراتبی از view ها باشد. با استفاده از این سلسله مراتب می‌توانید به دلخواه نواحی پیچیده‌ای از صفحه را تعریف کنید. ایجاد، اصلاح و نابود کردن این نواحی به صورت یک واحد انجام می‌شود. یک سلسله مراتب view می‌تواند view های تعریف شده در کامپوننت هایی که به NgModule های مختلف متعلق هستند را با یکدیگر ترکیب کند. معمولاً این اتفاق مخصوصاً برای کتابخانه‌های رابط کاربری می افتد.

زمانی که کامپوننتی را ایجاد می‌کنید، این کامپوننت به طور مستقیم به تنها یک view به نام host view مرتبط می‌شود. host view می‌تواند ریشه‌ی یک سلسله مراتب view باشد و می‌تواند شامل view های ادغام شده که خود، host view کامپوننت های دیگر هستند باشد. این کامپوننت ها می‌توانند در NgModule یکسانی باشند و یا می‌توان آن‌ها را از NgModule های دیگر وارد کرد. view های موجود در این درخت می‌توانند تا هر عمقی تو در تو باشند.

NgModule ها و ماژول‌های جاوا اسکریپت

سیستم NgModule با سیستم ماژول جاوا اسکریپت (ES2015) در مدیریت مجموعه اشیاء جاوا اسکریپت تفاوت دارد و به آن ارتباطی ندارد. این دو یکدیگر را تکمیل می‌کنند و می‌توانید برای نوشتن برنامه‌های خود از آن‌ها در کنار یکدیگر استفاده کنید.
در جاوا اسکریپت هر فایل یک ماژول است و تمامی اشیاء تعریف شده در این فایل متعلق به آن ماژول هستند. این ماژول برای آن که برخی از اشیاء را اعلان عمومی کند، آن‌ها را با عبارت کلیدی export نشان می‌دهد. ماژول‌های جاوا اسکریپت دیگر برای دسترسی به اشیاء عمومی از ماژول‌های دیگر از دستور import استفاده می‌کنند.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

در این لینک در رابطه با سیستم ماژول جاوا اسکریپت بیشتر بخوانید.

کتابخانه‌های Angular

Angular به صورت مجموعه‌ای از ماژول‌های جاوا اسکریپت بارگیری می‌شود. این ماژول‌ها را می‌توانید به صورت ماژول‌های کتابخانه‌ای در نظر بگیرید. هر یک از اسامی کتابخانه‌های Angular با پیشوند @angular آغاز می‌شوند. به کمک npm package manager آن‌ها را نصب کنید و بخش‌های مورد نظر آن را با استفاده از دستورات import جاوا اسکریپت وارد کنید.
برای مثال می‌توانید مانند زیر دکوراتور کامپوننت Angular را از کتابخانه‌ی @angular/core وارد کنید.

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

همچنین می‌توانید با استفاده از دستور import جاوا اسکریپت NgModule ها را از کتابخانه‌های Angular import کنید. برای مثال در کد زیر BrowserModule NgModule از کتابخانه‌ی platform-browser وارد شده است.

import { BrowserModule } from '@angular/platform-browser';

در مثال ساده‌ی ماژول اصلی بالا، ماژول برنامه به محتوایی از داخل BrowserModule نیاز دارد. برای دسترسی به این محتوا مانند زیر آن را به متادیتای @NgModule وارد کنید.

imports: [BrowserModule],

در این صورت شما می‌توانید از سیستم‌های ماژول جاوا اسکریپت و Angular در کنار یکدیگر استفاده کنید. با اینکه احتمال گیج شدن در این دو سیستم بسیار بالا است (زیرا فهرست لغات imports و exports مشترک است)، اما می‌توانید در زمینه‌ای که آن‌ها کاربرد دارند با مفهوم آن‌ها آشنا شوید.
برای اطلاعات بیشتر به «آموزش NgModule ها» مراجعه کنید.