| وجه المقارنة | المكون المستقل (Standalone) | المكون التقليدي (NgModule) |
|---|---|---|
| طريقة التسجيل | يكتفي بذاته عبر خاصية standalone: true | يجب الإعلان عنه في مصفوفة declarations داخل NgModule |
| إدارة التبعيات (Dependencies) | يستورد ما يحتاجه فقط مباشرة داخل مصفوفة imports الخاصة به | يعتمد على ما يتم استيراده في الوحدة التجميعية (Module) التي ينتمي إليها |
| تعقيد الملفات | ملفات أقل وهيكل نظيف ومباشر | كثرة ملفات الـ Modules وتداخلها مما يزيد من تعقيد المشروع |
| التحميل الكسول (Lazy Loading) | سهل جداً ويمكن تحميل المكون مباشرة عبر التوجيه (Routing) | يتطلب إنشاء وحدات توجيه فرعية (Routing Modules) مخصصة |
تعتبر المكونات المستقلة (Standalone Components) النقلة النوعية الأكبر والأهم في تاريخ إطار عمل أنجولر. في Angular 22.1، أصبحت هذه المعمارية هي الافتراضية والمعيار الأساسي لبناء التطبيقات. ببساطة، المكون المستقل هو مكون يكتفي بذاته ويدير احتياجاته بنفسه، ولا يحتاج مطلقاً إلى أن يتم تسجيله أو الإعلان عنه داخل أي وحدة تجميعية (NgModule)، مما يبسط هيكل التطبيق بشكل جذري ويسرع من عملية التعلم والتطوير بشكل غير مسبوق.
كل مكون مستقل يعتبر وحدة متكاملة. إذا كان المكون يحتاج إلى توجيه معين (مثل *ngIf) أو أنبوب (Pipe) أو حتى مكون آخر، فإنه يقوم باستيراده مباشرة. هذا يجعل الكود أكثر شفافية، حيث يمكنك بمجرد النظر إلى المكون معرفة كل ما يعتمد عليه للعمل.
في الماضي، كان المطورون الجدد يعانون من فهم كيفية ربط المكونات بالوحدات. مع المكونات المستقلة، تم إلغاء هذه الطبقة الإضافية، وأصبح التركيز منصباً بالكامل على المكون نفسه كحجر بناء أساسي لواجهة المستخدم.
هكذا يبدو المكون في Angular 22.1. لاحظ استخدام standalone: true ومصفوفة imports التي تحل محل الـ NgModule:
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { UserProfileComponent } from './user-profile.component'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-hello-standalone', |
| 7 | standalone: true, // هذه الخاصية هي ما تجعل المكون مستقلاً |
| 8 | imports: [CommonModule, UserProfileComponent], // استيراد التبعيات والمكونات الأخرى هنا |
| 9 | template: ` |
| 10 | <div class="welcome-card"> |
| 11 | <h1>مرحباً بك في عالم المكونات المستقلة!</h1> |
| 12 | <!-- استخدام المكون المستورد مباشرة --> |
| 13 | <app-user-profile></app-user-profile> |
| 14 | </div> |
| 15 | `, |
| 16 | styles: [`h1 { color: #005b9f; }`] |
| 17 | }) |
| 18 | export class HelloStandaloneComponent { |
| 19 | // هنا يكتب المنطق البرمجي الخاص بالمكون |
| 20 | } |