مقدمه ای بر ماژول آنگولار

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

در حقیقت یک برنامه آنگولار مانند یک پازل است که برای دیدن تصویر اصلی، تمامی قطعات پازل (در حقیقت ماژول ها) می بایست در کنار یکدیگر قرار گیرند.

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

استفاده ساده از یک ماژول

جهت پیاده سازی و تعریف ماژول می بایست از decorator (دکوراتور یا نشان) NgModule همانند مثال زیر استفاده نمود:

import { NgModule } from '@angular/core';
@NgModule({
	imports: [ ... ],
	declarations: [ ... ],
	bootstrap: [ ... ]
})
export class AppModule { }

در مثال بالا، با استفاده از دکوراتور NgModule کلاس AppModule را به یک ماژول آنگولار تبدیل کردیم. دکوراتور NgModule به سه خصوصیت imports، declaration و bootstrap نیازمند است.

خصوصیت imports مجموعه ای از ماژول های موجود را تعریف می کند که می توان از آنها در این ماژول استفاده نمود. این خصوصیت دقیقاً اجرای پازل (در حقیقت برنامه) را معرفی می کند. خصوصیت declaration مجموعه ای از کامپوننت ها، دایرکتیوها و پایپ هائی را تعریف می کند که از اجزای ماژول می باشند. خصوصیت bootstrap نیز کامپوننت اصلی ماژول را مشخص می نماید.

 

نکته: زمانی که بیشتر از یک کامپوننت یه عنوان کامپوننت اصلی ماژول مشخص می شوند، نیازمند ارتباطات پیچیده ای هستیم( در مقالات بعدی به آن خواهیم پرداخت).

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

app/app.component.ts
import { Component } from '@angular/core';
@Component({
	selector: 'app-root',
	template: '<h1>My Angular 2 App</h1>'
})
export class AppComponent {}

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

فایل app.component.ts  تنها یک کامپوننت جهت نمایش جمله hello world است. در مقابل فایل app.module.ts طبق ساختار یک ماژول تعریف شده و در آن ماژول ها و کامپوننت های مورد نظر تعریف شده اند.

اولین نکته قابل توجه این است که ماژول BrowserModule به صورت یک وابستگی صریح در ماژول مورد نظر تعریف شده یا اصطلاحا import شده است. BrowserModule یک ماژول داخلی آنگولار است که دایرکتیوها، پایپ ها و سرویس های ابتدائی و کاربردی را در خود نگه می دارد. در حقیقت ما این وابستگی ماژول به ماژول های دیگر را به این دلیل ایجاد می کنیم تا بتوانیم از دایرکتیو های تعریف شده مانند *ngFor یا *ngIf در قالب html کامپوننت مورد نظر استفاده کنیم.

با توجه به اینکه کامپوننت اصلی ( و تنها کامپوننت) ماژول ما AppComponent می باشد، می بایست این کامپوننت را در خصوصیت bootstrap ماژول تعریف نمائیم. همچنین به این دلیل که ما قصد داریم در خصوصیت declarations تمامی کامپوننت ها یا پایپ های سازنده برنامه خود را تعریف کنیم، می بایست مجددا AppComponent را در اینجا نیز تعریف کنیم.

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

به همان صورتی که در یک ماژول ما می توانیم یک کامپوننت اصلی و تعداد زیادی کامپوننت فرعی داشته باشیم، در یک برنامه آنگولار نیز ما می توانیم یک ماژول اصلی و صفر یا چند ماژول فرعی داشته باشیم. برای اینکه برنامه توسط آنگولار اجرا شود، می بایست ماژول اصلی برنامه مشخص شود. ساده ترین راه برای تشخیص ماژول اصلی یک برنامه، بررسی خصوصیت imports از دکوراتور NgModule است. در صورت  وجود ماژول BrowserModule در این خصوصیت، ماژول مورد نظر ماژول اصلی برنامه است. ولی در صورتی که به جای آن ماژول CommonModule وجود داشته باشد، ماژول ما یک ماژول فرعی خواهد بود.

همیشه باید این نکته رعایت شود که از BrowserModule تنها در ماژول اصلی یا ریشه استفاده می شود. جهت ماژول های فرعی برنامه ماژول CommonModule به کار میرود. عدم رعایت این نکته باعث بروز مشکل در (lazy load module) می شود که در مباحث بعدی به آنها اشاره خواهد شد.

نکته: طبق قرارداد، ماژول اصلی همیشه به عنوان AppModule نامگذاری می شود.

اجرای برنامه

برای اجرای برنامه، ابتدا باید ماژول اصلی را مشخص نمائیم تا کامپایل برنامه در مرورگر انجام شود. کامپایل در مرورگر همچنین با نام کامپایل درجا (Just in Time) نیز شناخته می شود.

main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

در ادامه و در بخش بعدی آموزش ابتدا یک ماژول تعریف می کنیم و سپس چندین کامپوننت، سرویس و پایپ به آن اضافه خواهیم کرد.