Loading...
ماژول ها (Modules) در انگولار 7
ماژول (Module) در انگولار 7 به محلی اشاره دارد که در آن می توان کامپوننت ها، directive ها، pipe ها و سرویس های مرتبط با برنامه را گروه بندی کرد. هنگامی که در حال توسعه یک وب سایت باشید، بخش های هدر، فوتر، راست، چپ، وسط به عنوان بخشی از یک ماژول به حساب می آیند.
برای تعریف ماژول در انگولار می توانید از NgModule استفاده کنید. هنگامی که شما یک پروژه جدید با استفاده از CLI ایجاد می کنید،NgModule در فایل app.module.ts به صورت خودکار ایجاد می شود.
محتوای app.module.ts که توسط خود Angular CLI ایجاد شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; @NgModule({ declarations: [ AppComponent, NewCmpComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
NgModule باید به صورت زیر import شود:
1 | import { NgModule } from '@angular/core'; |
در زیر ساختار مربوط به NgModule را مشاهده می کنید:
1 2 3 4 5 6 7 8 9 10 11 12 | @NgModule({ declarations: [ AppComponent, NewCmpComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) |
که با @NgModule شروع می شود و شامل شیء از declaration ها، import ها، provider ها و bootstrap است.
اعلان (Declaration)
این یک آرایه از کامپوننت های ایجاد شده است. هر کامپوننت جدیدی که ایجاد می شود، باید در این فایل import و اعلان شود. مانند نمونه زیر:
1 2 3 4 | declarations: [ AppComponent, NewCmpComponent ] |
وارد کردن (Import)
این یک آرایه از ماژول های مورد نیاز برای استفاده در برنامه است. همچنین می تواند توسط کامپوننت های اعلان شده، در بخش declarations نیز مورد استفاده قرار بگیرد. در حال حاضر فقط یک ماژول با نام BrowserModule را می بینید که import شده است. هنگامی که به ماژول دیگری نیاز داشته باشید، مثلا Forms می توانید آن ار مانند نمونه زیر اضافه کنید.
Import کردن ماژول Forms:
1 | import { FormsModule } from '@angular/forms'; |
افزودن به بخش imports:
1 2 3 4 | imports: [ BrowserModule, FormsModule ] |
Providers
این بخش برای اضافه کردن سرویس های ایجاد شده است.
Bootstrap
این بخش شامل کامپوننت اصلی (main) برای شروع اجرای برنامه است.
هیچ نظری ثبت نشده است