| الأمر أو الخاصية (Flag) | الوظيفة الأساسية | الاستخدام العملي |
|---|---|---|
| ng generate component <name> | ينشئ مجلداً جديداً يحتوي على ملفات المكون الأساسية (TS- HTML- SCSS) | الطريقة القياسية لبناء أي واجهة جديدة مثل "بطاقة منتج" أو "قائمة جانبية" |
| --inline-style أو -s | يدمج التنسيقات (CSS) داخل كلاس الـ TypeScript بدلاً من إنشاء ملف خارجي منفصل | يُستخدم للمكونات البسيطة التي لا تحتاج لتنسيقات معقدة أو طويلة |
| --inline-template أو -t | يدمج قالب الـ HTML مباشرة داخل كلاس الـ TypeScript بدلاً من ملف خارجي | مفيد للمكونات الدقيقة (Micro Components) التي تحتوي على سطر أو سطرين من الـ HTML فقط |
| --dry-run أو -d | ينفذ أمر الإنشاء وهمياً لعرض الملفات التي سيتم إنشاؤها دون كتابتها فعلياً على القرص | اختبار نتيجة الأمر والتأكد من صحة الأسماء والمسارات قبل التنفيذ الفعلي |
بعد أن تعرفنا في الدرس السابق على التشريح الداخلي للمكونات، حان الوقت لنضع أيدينا في الكود العملي. في هذا الدرس، سنتعلم كيف نستخدم أداة سطر الأوامر (Angular CLI) لإنشاء أول مكون مستقل (Standalone Component) خاص بنا خطوة بخطوة، وكيف نقوم بتكوينه وعرضه داخل تطبيق Angular 22.1 ليكون جزءاً حياً وفعالاً من واجهة المستخدم.
بدلاً من إنشاء الملفات يدوياً وكتابة الأكواد الأساسية (Boilerplate)، يوفر لنا أنجولر الأمر ng generate component (أو اختصاراً ng g c). في إصدار Angular 22.1، هذا الأمر يُنشئ مكوناً مستقلاً يحتوي على خاصية standalone: true بشكل افتراضي، دون الحاجة لإضافة أي خصائص إضافية في سطر الأوامر، مما يسهل ويسرع عملية التكوين
إنشاء المكون لا يعني ظهوره فوراً للمستخدم. لكي يظهر المكون الجديد في الواجهة، يجب علينا استخدام "المُحدد" الخاص به (Selector) كعلامة HTML مخصصة (Custom HTML Tag) داخل مكون آخر يعمل بالفعل (مثل المكون الجذري للتطبيق)، مع ضرورة التأكد من استيراده أولاً في مصفوفة imports الخاصة بالمكون المُستضيف.
افتح سطر الأوامر (Terminal) داخل مجلد مشروعك واكتب الأمر التالي:
| 1 | # إنشاء مكون جديد باسم "product-card" |
| 2 | ng g c product-card |
ℹ️ معلومة
سيقوم أنجولر بإنشاء مجلد جديد باسم product-card يحتوي على 4 ملفات (HTML, SCSS, TS, وملف للاختبار Spec).
لنفترض أننا نريد عرض المكون الجديد الذي أنشأناه داخل المكون الرئيسي app.component.ts. هكذا تتم عملية التكوين والربط:
| 1 | import { Component } from '@angular/core'; |
| 2 | // 1. استيراد كلاس المكون الجديد |
| 3 | import { ProductCardComponent } from './product-card/product-card.component'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-root', |
| 7 | standalone: true, |
| 8 | // 2. إضافته في مصفوفة الاستيرادات (Imports) ليتمكن أنجولر من التعرف عليه |
| 9 | imports: [ProductCardComponent], |
| 10 | template: ` |
| 11 | <main class="container"> |
| 12 | <h1>تطبيق المتجر الإلكتروني</h1> |
| 13 | |
| 14 | <!-- 3. استخدام المحدد (Selector) لعرض المكون في واجهة المستخدم --> |
| 15 | <app-product-card></app-product-card> |
| 16 | <app-product-card></app-product-card> |
| 17 | </main> |
| 18 | ` |
| 19 | }) |
| 20 | export class AppComponent { } |