ما هو NgModule؟

Question

ما هو NgModule؟

Accepted Answer

**NgModule** هي فئة مزينة بـ `@NgModule` تجمع المكونات والتوجيهات والأنابيب والخدمات ذات الصلة في كتلة متماسكة، مما يخبر Angular كيفية ترجمتها وربطها معًا. (ملاحظة: Angular الحديث يفضل بشكل متزايد **المكونات المستقلة** على NgModules، لكن فهم NgModules لا يزال ضروريًا لمعظم قواعد الأكوان الموجودة.)

## تشريح 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
```

يتم تنظيم التطبيقات إلى **وحدات ميزات** (واحدة لكل منطقة مجال) و**وحدة مشتركة** (مكونات/أنابيب شائعة)، مما يحافظ على قاعدة الأكوان معيارية ويمكّن التحميل الكسول لكل ميزة.

## الانتقال إلى المستقل

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

يتيح Angular الحديث للمكونات أن تكون **مستقلة** — بإعلان تبعياتها الخاصة مباشرة — مما يقلل أو يلغي نموذج NgModule.

## لماذا يهم

NgModules هي آلية التنظيم والربط بين التبعيات التقليدية في Angular — فهم `declarations`/`imports`/`exports`/`providers` ضروري للتنقل عبر الغالبية العظمى من تطبيقات Angular الموجودة وفهم التحميل الكسول.

بينما يميل الكود الجديد نحو المكونات المستقلة، يبقى معرفة NgModule ضرورية للعمل الفعلي في Angular.