لو انت لسة جديد في Angular مهم جدا تعرف المفاهيم الاساسية دي

#انجولار بيتكون من الاجزاء دي

• Components — دة الجزء المسؤول عن تكوين واجهة البرنامج او ال UI
• Directives — ودي مسؤولة عن تغيير سلوك اي component
• Pipes — ودي مسؤولة عن تحويل قيمة في الـ template لقيمة جديدة.
• Services —دي بيكون فيها الـ business logic والـ API calls.
• Modules — دي بنجمع فيها الاجزاء كلها وبنربطها ببعض, لو بتستخدم standalone components مش هنحتاجها.

باختصار الـ component هو اي view بيظهر قدامك علي الشاشة , ممكن يكون زرار او حتي صفحة كاملة

الـ component نفسه مكون من

• template: ودة بيكون فيه كود الـ html ولكن بيدعم binding
• class: ودة فيه اكواد typescript والـ lifecycle بتاعة انجولار
• css: ودة بنحط فيه الستايل بتاع الـ component
• spec: ملف الاختبارات او unit testing

ماتقلقش لو لقيت نفسك لسة مش فاهم لاننا هنتكلم بعمق اكتر عن المواضيع دي عملي

يعني اية data binding في Angular؟

قولنا من شوية ان الـ template عبارة عن كود html عادي بس بيدعم data binding, فيعني اية data binding

هي عبارة عن متغيرات عادية, كل اما قيمتها بتتغير بتحدث الـ component بالقيم الجديدة

شوف المثال دة عشان تفهم اكتر

<p> {{ name }} </p>

دة كود html عادي بس جواه متغير اللي هو name وزي ما لاحظت ان المتغير بيتكتب جوة الاقواس دي `{{...}}`

دلوقت لما الابليكيشن بتاعنا هيتبني هيشيل المتغير name ويحط قيمته زي اي متغير عادي, بس الجديد هنا ان لما قيمة المتغير هتتغير, الـ view هو كمان هيتغير تلقائيا

انواع data binding في انجولار

انجولار بيدعم 3 انواع من الـ data binding

• one-way input data binding: ودة بيكون في اتجاه واحد من الكلاس للـ template ودة المثال اللي لسة اخدينه حالا, ودة بنسميه property binding
• one-way output data binding: ودة برضو بيكون في اتجاه واحد ولكن في الاتجاه العكسي, هنا لما الـ view بيتغير المتغير هو اللي بيتحدث .. من الاهر بيكون عبارة عن event عادي, ودة بنسميه event binding
• two-ways: ودة بيكون عبارة عن الاتنين اللي فاتوا مع بعض, اي حاجة بتتغير بتحدث الحاجة التانية

والصورة دي بتوضحلك الموضوع بصورة ابسط