NgModule คืออะไร?

Question

NgModule คืออะไร?

Accepted Answer

**NgModule** เป็นคลาสที่ตกแต่งด้วย `@NgModule` ซึ่งจัดกลุ่มส่วนประกอบ คำสั่ง ไปป์ และบริการที่เกี่ยวข้องเป็นบล็อกที่เชื่อมโยงกัน เพื่อบอก Angular ว่าต้องคอมไพล์และเชื่อมต่อพวกมันเข้าด้วยกันอย่างไร (หมายเหตุ: Angular สมัยใหม่มักชอบ **ส่วนประกอบแบบสแตนด์โลน** มากกว่า NgModules แต่การเข้าใจ NgModules ยังคงจำเป็นสำหรับ codebase ส่วนใหญ่ที่มีอยู่)

## โครงสร้างของ NgModule

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## สี่อาร์เรย์หลัก

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

ส่วนประกอบสามารถประกาศได้ในเพียง **หนึ่ง** โมดูลเท่านั้น และต้องประกาศ (หรือนำเข้าเป็นสแตนด์โลน) เพื่อใช้ได้ในเทมเพลตของโมดูลนั้น

## โมดูลรูท

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

แอปทุกตัว (ที่ไม่ใช่สแตนด์โลน) มี `AppModule` รูท พร้อมกับอาร์เรย์ `bootstrap` ที่ระบุส่วนประกอบเริ่มต้น

## โมดูลฟีเจอร์และการจัดระเบียบ

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

แอปต่างๆ ถูกจัดระเบียบเป็น **โมดูลฟีเจอร์** (หนึ่งต่อพื้นที่โดเมน) และ **โมดูลที่แชร์** (ส่วนประกอบ/ไปป์ทั่วไป) เพื่อให้ codebase เป็นโมดูลาร์และเปิดใจให้ lazy loading ต่อฟีเจอร์

## การเปลี่ยนไปสู่สแตนด์โลน

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Angular สมัยใหม่อนุญาตให้ส่วนประกอบเป็น **สแตนด์โลน** — ประกาศการพึ่งพาของตนเองโดยตรง — ซึ่งลดหรือกำจัด NgModule boilerplate

## ทำไมถึงสำคัญ

NgModules เป็นกลไกแบบดั้งเดิมสำหรับการจัดระเบียบและการเชื่อมต่อการพึ่งพาใน Angular — การเข้าใจ `declarations`/`imports`/`exports`/`providers` จำเป็นต้องนำทางไปยังแอป Angular ส่วนใหญ่ที่มีอยู่และเข้าใจการโหลดแบบขี้เกียจ

แม้ว่าโค้ดใหม่มีแนวโน้มไปสู่ส่วนประกอบแบบสแตนด์โลน แต่ความรู้ NgModule ยังคงจำเป็นสำหรับงาน Angular ในโลกแห่งความเป็นจริง