كيفية إنشاء المكونات (Components) في تطبيق Angular: دليل شامل وموسع

المقدمة

تُعد المكونات (Components) العمود الفقري لأي تطبيق Angular، حيث تُشكل اللبنات الأساسية لواجهة المستخدم (UI). يتكون كل تطبيق Angular من مجموعة من المكونات التي تتفاعل مع بعضها البعض لتكوين تجربة مستخدم ديناميكية وشاملة. يتميز إطار العمل Angular، الذي طورته شركة Google، بقدرته على بناء تطبيقات أحادية الصفحة (SPA) عالية الأداء باستخدام مفهوم المكونات كجزء جوهري من بنيته المعمارية.

إن فهم كيفية إنشاء مكونات Angular بشكل دقيق، وصحيح، ومتقدم، ليس فقط أمرًا مهمًا لمطوري الواجهات الأمامية، بل يُعد خطوة لا غنى عنها لتطوير تطبيقات حديثة وقابلة للصيانة. في هذا المقال، سيتم استعراض كل ما يتعلق بإنشاء المكونات، من الأساسيات إلى المفاهيم المتقدمة، مع التركيز على البنية، الأدوات، الأوامر، الأنماط، وأفضل الممارسات البرمجية.

أولاً: فهم المكونات في Angular

المكون في Angular هو عبارة عن كائن TypeScript مرتبط بقالب HTML ونمط CSS. تتمثل وظيفته في عرض البيانات للمستخدم والتفاعل مع الأحداث التي يقوم بها المستخدم.

البنية الأساسية للمكون:

• الملف TypeScript (.ts): يحتوي على منطق المكون وتعريفه.

• الملف HTML (.html): يمثل القالب الذي يعرض البيانات.

• الملف CSS/SCSS (.css / .scss): يحتوي على التنسيقات الخاصة بالمكون.

كل مكون في Angular يحتوي على Decorator يُسمى @Component يُستخدم لتعريف خصائص المكون مثل القالب، الاسم، والأنماط.

ثانياً: إنشاء مكون باستخدام Angular CLI

يُعد Angular CLI (واجهة سطر الأوامر الخاصة بـ Angular) أداة قوية وفعالة تُستخدم لتوليد المكونات وغيرها من عناصر Angular بسرعة وبدون أخطاء.

الأمر الأساسي:

bash
CopyEdit
ng generate component اسم-المكون

أو باستخدام الاختصار:

bash
CopyEdit
ng g c اسم-المكون

ما الذي يقوم به هذا الأمر؟

عند تنفيذ هذا الأمر، يقوم Angular CLI بإنشاء مجلد جديد يحتوي على الملفات التالية:

• اسم-المكون.component.ts: منطق المكون.

• اسم-المكون.component.html: القالب.

• اسم-المكون.component.css: الأنماط.

• اسم-المكون.component.spec.ts: ملف لاختبار الوحدة Unit Testing.

كما يقوم بتحديث ملف app.module.ts تلقائيًا لإضافة المكون إلى قائمة declarations.

ثالثاً: شرح Decorator @Component

Decorator @Component يُستخدم لتعريف المكون ويحتوي على عدة خصائص مهمة:

ts
CopyEdit
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})

• selector: هو اسم العنصر الذي سيتم استخدامه في القالب (HTML) لاستدعاء هذا المكون.

• templateUrl: يحدد مسار ملف القالب.

• styleUrls: مصفوفة تحتوي على ملفات التنسيق CSS أو SCSS الخاصة بالمكون.

رابعاً: تنظيم المكونات داخل المشروع

للحفاظ على تنظيم المشروع، يُفضل دائمًا تجميع المكونات في مجلدات مستقلة تحت مجلد src/app/. على سبيل المثال، إذا كان هناك مكون لإدارة المستخدمين:

bash
CopyEdit
ng g c users/user-profile

سيقوم Angular بإنشاء المكون داخل مجلد users تحت مجلد user-profile، وهو أسلوب يُعزز التنظيم الهيكلي للمشروع.

خامساً: ربط المكونات معًا داخل التطبيق

يمكن لمكون Angular أن يحتوي على مكونات أخرى بداخله، وهذه خاصية تُعرف بـ Component Nesting. على سبيل المثال، إذا كان هناك مكون رئيسي يحتوي على مكونات فرعية مثل شريط التنقل والمحتوى، يتم إدراج المكونات الفرعية داخل القالب باستخدام الـ selector.

html
CopyEdit
<app-navbar>app-navbar>
<app-content>app-content>

سادساً: تبادل البيانات بين المكونات

يتم تبادل البيانات بين المكونات باستخدام خاصيتين أساسيتين:

1. Input Binding

يُستخدم لتمرير البيانات من المكون الأب إلى الابن.

ts
CopyEdit
@Input() title: string;

ويُستخدم في القالب كالتالي:

html
CopyEdit
<app-child [title]="parentTitle">app-child>

2. Output Binding

يُستخدم لإرسال الأحداث من المكون الابن إلى الأب باستخدام @Output و EventEmitter.

ts
CopyEdit
@Output() notify = new EventEmitter<string>();

notifyParent() {
  this.notify.emit('تم الإرسال');
}

سابعاً: دورة حياة المكون (Component Lifecycle)

يوفر Angular مجموعة من الواجهات (Interfaces) المرتبطة بدورة حياة المكون، يمكن تنفيذها داخل المكون للتحكم في سلوكه في مراحل معينة:

مثال على OnInit:

ts
CopyEdit
export class ExampleComponent implements OnInit {
  ngOnInit(): void {
    console.log('تم تهيئة المكون');
  }
}

ثامناً: أنماط التصميم للمكونات

مكونات العرض (Presentational Components)

تهتم فقط بعرض البيانات ولا تحتوي على منطق تجاري. تعتمد على @Input() و @Output() بشكل كبير.

مكونات الحاوية (Container Components)

تتعامل مع الخدمات والبيانات وتحتوي على مكونات عرض بداخها.

هذا الفصل بين العرض والمنطق يُعتبر من أفضل الممارسات التي تُسهل الاختبار وإعادة الاستخدام.

تاسعاً: أفضل الممارسات عند إنشاء المكونات

• تسمية المكونات: استخدام تسميات دالة ومفهومة وواضحة.

• تقسيم المكونات: عدم تحميل مكون واحد بوظائف كثيرة.

• تجنب التكرار: الاستفادة من مكونات قابلة لإعادة الاستخدام.

• التحكم في CSS: تجنب التأثير على مكونات أخرى باستخدام ViewEncapsulation أو تنسيقات مخصصة.

• كتابة اختبارات للوحدات: الاستفادة من ملف .spec.ts لاختبار وظائف المكون بشكل منفصل.

عاشراً: استخدام الأنماط التفاعلية Reactive Patterns

في المكونات المتقدمة، يُفضل استخدام البرمجة التفاعلية باستخدام RxJS للتعامل مع البيانات المتدفقة (streams) مثل HTTP أو إدخال المستخدم.

ts
CopyEdit
import { Observable } from 'rxjs';

export class NewsComponent {
  news$: Observable<Article[]>;

  constructor(private newsService: NewsService) {
    this.news$ = this.newsService.getLatestNews();
  }
}

ويُستخدم في القالب باستخدام async pipe:

html
CopyEdit
<ul>
  <li *ngFor="let article of news$ | async">{{ article.title }}li>
ul>

حادي عشر: المكونات الديناميكية

يتيح Angular إنشاء مكونات بشكل ديناميكي داخل الحاويات باستخدام ComponentFactoryResolver أو عبر ViewContainerRef.

هذا النوع من المكونات يُستخدم في الحالات التي تتطلب إدراج مكونات حسب السياق مثل أنظمة الإشعارات أو النماذج المنبثقة.

ثاني عشر: استخدام وحدات Angular لتجميع المكونات

في المشاريع الكبيرة، من الأفضل تجميع المكونات في وحدات (Modules) منفصلة. هذا يُسهم في تحسين قابلية الصيانة وتحميل lazy loading.

bash
CopyEdit
ng g m users
ng g c users/user-profile

ثم يتم تسجيل المكون في الوحدة الجديدة UsersModule بدلاً من AppModule.

جدول المقارنة بين مكونات Angular الأساسية

ثالث عشر: أمثلة عملية على إنشاء مكون

إنشاء مكون لإظهار قائمة مهام:

bash
CopyEdit
ng g c tasks/task-list

task-list.component.ts

ts
CopyEdit
@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks = ['قراءة كتاب', 'ممارسة الرياضة', 'كتابة مقالة'];
}

task-list.component.html

html
CopyEdit
<ul>
  <li *ngFor="let task of tasks">{{ task }}li>
ul>

المصادر والمراجع

• Angular Documentation: https://angular.io/guide/component-overview

• Angular CLI Documentation: https://angular.io/cli/generate

هذا الدليل يُقدم نظرة شاملة حول إنشاء المكونات في Angular، بدءًا من الأساسيات إلى المفاهيم المتقدمة التي تُسهم في بناء تطبيقات قوية، مرنة، وقابلة للتوسع. كتابة المكونات بشكل منظم ومستند إلى أفضل الممارسات يُعد خطوة رئيسية لبناء واجهات مستخدم احترافية وحديثة.