نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر

نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
AN

منهج Angular v22.1

دليل مرجعي شامل

كل اللغات
مدرسة البرمجة/منهج Angular v22.1/التوليد التلقائي للمكونات

التوليد التلقائي للمكونات

توليد المكوناتAngular CLI generate componentإنشاء Components تلقائياًمعمارية Standalone في Angular 22.1

جدول مرجعي سريع

1
الأمر / الخيارالوظيفة الأساسيةالتأثير على المشروع
ng g c component-nameتوليد مكون جديد بالكامل مع ملفاته الأربعة الأساسيةينشئ مجلداً جديداً للمكون ويقوم بتجهيز ملفات الـ TypeScript والـ HTML والتنسيق
--flatمنع إنشاء مجلد مستقل للمكونيضع ملفات المكون مباشرة داخل المجلد الحالي دون بناء مجلد فرعي
--skip-testsتخطي إنتاج ملفات الاختبار (Spec)يوفر مساحة وينظف المشروع من الملفات غير الضرورية إذا كنت لا تستخدم اختبارات الوحدات حالياً

الشرح

نواصل رحلتنا في استكشاف قدرات أداة Angular CLI، ومع الدرس الثاني الذي تركز فيه الأداة على تسريع عملية تطوير واجهات المستخدم. بدلاً من إنشاء مجلدات وملفات المكونات (HTML, TS, SCSS, Spec) يدوياً وما يتبع ذلك من أخطاء في التسمية أو الربط، يتيح لك أمر التوليد التلقائي بناء مكونات مستقلة متوافقة مع معمارية Standalone بثوانٍ معدودة.

تفصيل عملية توليد المكونات

آلية عمل الأمر ng generate component:

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

التوافق مع Standalone Components:

يتم توليد المكونات بشكل افتراضي لتكون مستقلة (standalone: true)، مما يعني أنها لا تحتاج إلى الانضمام إلى أي مجمعات (NgModules)، ويمكن استيرادها مباشرة داخل المكونات الأخرى بكل سلاسة.

أمثلة برمجية: تطبيق عملي لتوليد المكونات

المثال الأول: إنشاء مكون قياسي جديد

bash
1# إنشاء مكون خاص بملف المستخدم الشخصي
2ng generate component features/user-profile

ℹ️ معلومة

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

bash
1ng g c features/user-profile

المثال الثاني: توليد مكون مسطح (بدون مجلد فرعي)

bash
1# إنشاء مكون زر مخصص مباشرة داخل مجلد المشتركة
2ng g c shared/ui-button --flat --skip-tests

نصائح احترافية

  • —نظم مسارات مكوناتك جيداً أثناء الإنشاء!
  • —احرص دائماً على تحديد مسار المكون بوضوح قبل أمر التوليد (مثل components/header أو pages/dashboard) لضمان عدم تراثم الملفات عشوائياً في المجلد الجذر، مما يحافظ على نظافة وهندسة المشروع طوال فترة التطوير.

الدرس السابق

مقدمه شامله لاهم اوامر Angular CLI

الدرس التالي

توليد الخدمات الأنابيب والتوجيهات

نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر