آموزش ماژول ها در انگولار ۷

 آموزش ماژول ها در انگولار ۷

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

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

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

برای تعریف ماژول می توانیم از NgModule استفاده کنیم. هنگامی که یک پروژه جدید با استفاده از دستور Angular –cli ایجاد می کنید، ngmodule به طور پیش فرض در فایل app.module.ts ایجاد می شود و به صورت زیر به نظر می رسد –

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 { NgModule } from '@angular/core';

ساختار ngmodule مطابق شکل زیر است –

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

با @NgModule شروع می‌شود و حاوی یک شی است که دارای اعلان‌ها، واردات، ارائه‌دهندگان و راه‌انداز است.

Declaration

آرایه ای از اجزای ایجاد شده است. اگر هر مؤلفه جدیدی ایجاد شود، ابتدا وارد می شود و مرجع در اعلان ها مطابق شکل زیر گنجانده می شود.

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Import

این مجموعه ای از ماژول های مورد نیاز برای استفاده در برنامه است. همچنین می تواند توسط اجزای موجود در آرایه Declaration استفاده شود. به عنوان مثال، در حال حاضر در @NgModule، ماژول Browser را وارد شده می بینیم. در صورتی که درخواست شما به فرم نیاز دارد، می توانید ماژول را با کد زیر وارد کنید –

import { FormsModule } from '@angular/forms';

واردات در @NgModule مانند زیر خواهد بود –

imports: [ 
   BrowserModule, 
   FormsModule 
]

Providers

این شامل خدمات ایجاد شده می شود.

بوت استرپ

این شامل مولفه اصلی برنامه برای شروع اجرا می شود.

منبع.

لیست جلسات قبل آموزش انگولار ۷

1. آموزش انگولار ۷
2. آموزش نمای کلی انگولار ۷
3. آموزش راه اندازی محیط انگولار ۷
4. آموزش راه اندازی پروژه در انگولار ۷
5. آموزش اجزای سازنده در انگولار ۷