مرحبًا بك، هذا الدرس سيعرض ما هو مكون Angular وكيفية إنشاء مكون باستخدام Angular CLI المكونات هي أساس إطار عمل Angular المكون هو جزء من التطبيق مثل شريط التنقل أو شريط التنقل الجانبي يمكن أن يكون حقل البحث أو ربما استمارة التسجيل المكونات هي القطع المختلفة التي تبني تطبيقك لتوفر طريقة عرض للمستخدمين للتفاعل معها وفئة للاستجابة للأحداث والتعامل مع البيانات والمنطق تتحكم الفئة في منطق المكون وسلوكه ويقوم القالب بإعداد كيفية عرضه على الشاشة للمستخدم فئة المكون والقالب قادرون على التفاعل وتبادل المعلومات باستخدام الربط binding ربط الخاصية يسمح للفئة لتمرير البيانات إلى القالب لعرضها على المستخدم إذا غيّر المستخدم أي بيانات في العرض يمكن استخدام ربط الحدث لإطلاق حدث يقوم بتحديث البيانات في الفئة توفر البيانات الوصفية معلومات تكوين إضافية لفئة المكون تتم تسمية المكونات بخاصية تسمى المحدد selector تم تعيينها في البيانات الوصفية المحدد يستخدم لإخبار Angular أين يجب إنشاء هذا المكون وعرضه في التطبيق باستخدام المحدد يمكنك تضمين المكونات وقوالب المكونات الأخرى بدءًا من مكون الجذر هذا الذي يحمل تطبيق Angular بأكمله هذه المكونات المضمنة لها علاقات أصل / تابع التي تسمح لهم بالتفاعل وتمرير البيانات يتم تضمين المكون التابع داخل المكون الأصل هنا، مكون الجذر هو الأصل ومن ثم يحتوي على مكونين تابعيين A وB المكون أ هنا هو المكون الأصل لهذا المكون بالأسفل هنا مكون الحفيد هذا المكون هو حفيد مكون الجذر لأنه تابع لأحد مكونات الجذر الفرعية الآن، لإنشاء مكون افتح نافذة طرفية وتريد التأكد من أنك في الدليل الصحيح تريد أن تكون في المجلد الجذر لتطبيق Angular الخاص بك بالنسبة لي، هذا هو مجلد المكونات هنا ثم الأمر لإنشاء مكون جديد هو من مكون ng generate ثم اسم المكون ثم يمكنك أن ترى من النواتج الظاهرة أنه تم إنشاء أربع ملفات جديدة وتم تعديل ملف app.module داخل ملف الوحدة يمكنك أن ترى أنه يستورد المكون تلقائيًا من هنا ثم يعلن عن استخدامه في الوحدة أدناه تهتم أداة CLI بهذه الخطوة عند توليد المكون لذلك إذا كنت تنشئ ملفات المكون يدويًا لا تنسى أن تعلنهم هنا أو سيتم تجميع التطبيق مع وجود أخطاء يوجد مجلد المكون هنا داخل مجلد التطبيق الرئيسي هذا وهناك أربع ملفات تم إنشاؤها بواسطة CLI هذا هو أول ملف TypeScript هنا يستخدم لكتابة الاختبارات للمكون ملف TypeScript الثاني هنا هو ذلك المخصص للفئة ها هي العلامة التي تميز هذه الفئة كمكون والبيانات الوصفية لتكوينه سنغطي هذا بمزيد من التفصيل في الدرس التالي لكن تذكر اسم المحدد هنا هذا ما ستحتاجه لإضافة هذا المكون إلى التطبيق إذا فتحت ملف HTML الخاص بالمكون يمكنك أن ترى أنه يبدأ بعلامة الفقرة هذه هنا التي تنص على أن المكون يعمل وبعد ذلك، إذا فتحت ملف CSS هنا هذا يبدأ فارغًا لكن يمكننا كتابة قاعدة بسرعة لتغيير لون خط علامة الفقرة تلك الآن، لعرض هذا المكون في التطبيق افتح ملف app.component.html وهو ملف القالب لمكون الجذر هنا يمكنك حذف كل كود قالب البداية هذا وبعد ذلك سأضيف بسرعة علامة h1 التي تنص على تطبيق Angular الخاص بي ثم لإضافة المكون الجديد اكتب علامة باستخدام المحدد الذي تم تعيينه للمكون في هذه الحالة، كان app-hello-world الآن سأقوم بتشغيل ng serve الأمر في نافذة طرفية لبناء التطبيق الآن بعد تشغيل التطبيق سأفتحه في نافذة المتصفح ويمكنك الذهاب إلى localhost:4200 لعرض التطبيق وهنا يمكنك رؤية التطبيق يعرض هذا المكون الذي تم إنشاؤه هذا كل ما في هذا الدرس عرض مكونات Angular تحقق من الدرس التالي حيث سنغطي العلامة decorator والبيانات الوصفية