7. وحدات NgModules: اللبنات الأساسية

تطبيقات Angular هي تطبيقات وحداتية (modular). وحدات NgModules (@NgModule) هي حاويات تجمع المكونات والخدمات والأنابيب ذات الصلة، وتحدد كيف يجب على Angular تجميع وأطلاق أجزاء من التطبيق.

المُزخرف @NgModule

وحدة NgModule هي فئة مُزخرفة بـ @NgModule، والتي تأخذ كائناً واحداً للبيانات الوصفية (metadata).

typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component';

@NgModule({ declarations: [AppComponent, /* Other Components, Directives, Pipes /], imports: [BrowserModule, / Other Angular or custom Modules /], providers: [/ Services go here */], bootstrap: [AppComponent] // فقط في الوحدة الجذر (Root Module) }) export class AppModule { }

الخصائص الرئيسية لـ @NgModule

1. declarations: تسرد المكونات والتوجيهات والأنابيب التي تنتمي إلى هذه الوحدة. ملاحظة مهمة: لا يمكن الإعلان عن العناصر إلا في وحدة واحدة.
2. imports: تستورد وحدات NgModules الأخرى التي تكون فئاتها المصدرة (المكونات والتوجيهات والأنابيب) مطلوبة بواسطة المكونات في هذه الوحدة.
3. providers: تسرد الخدمات التي يجب أن تكون متاحة عبر حقن التبعية (Dependency Injection - DI) للتطبيق بأكمله (أو لهذه الوحدة فقط، اعتماداً على النطاق).
4. exports: تسرد المجموعة الفرعية من المكونات والتوجيهات والأنابيب التي يجب أن تكون متاحة للوحدات الأخرى التي تستورد هذه الوحدة (على سبيل المثال، إذا أنشأنا SharedModule).
5. bootstrap: (يُستخدم فقط في الوحدة الجذر، AppModule). يحدد المكون الجذر الذي يجب على Angular تحميله عند بدء تشغيل التطبيق.