# اية اللي أنجولار يقدر يعمله الجافاسكريبت مابتقدرش تعمله؟:

انجولار دخل مجال الـ UI development عشان يغير المعادية
اصبح بالامكان نعمل حاجات صعبة جدا يكاد يكون من المستحيل نعملها بنفسنا
تعالوا ندي بصة سريعة علي الحاجات اللي Angular بيعملها مانقدرش نعملها لوحدنا بسهولة

# Component-based app:
دلوقت نقدر نقسم الصفحات الكبيرة لمجموعة من المكونات الصغيرة ودة طبعا بأة بيسهل علينا التطوير وصيانة التطبيق
لان كل مكون بيأدي غرض محدد وواضح
# Reactivity:
ودي ميزة بتحلي الـ view يتحدث بمجرد تغيير قسمة ال state المقابلة بها

# Encapsulation:
من الحاجات اللي كانت بتتعب المبرمجين زمان هي الـ conflicts اللي كانت بتحصل في الستايلات
ولان ال ....

لما تكون بتعمل custom component في Angular غالبا هتعمل كدة
```
@Component({  template: `

{{ fullName }}

`, }) export class NameComponent {  @Input() firstName: string;  @Input() lastName: string;  fullName: string; ngOnInit() {  this.fullName = `${this.firstName} ${this.lastName}`;  } }
```
ممكن يتهيألك ان الكود دة صح .. بس هو غلط!

# طب اية مشكلته الكود دة ؟!!:
لو جربت الكود هتلاقيه شغال معاك كويس .. او بمعني أدق هيتهيألك انه شغال كويس
المشكلة عنا انك استخدمت الـ hook الغلط

الهوك ngOnInit بيشتغل مرة واحدة بعد الـ inistansiation ودة معناه ان لو الـ parent component حدث الـ inputs, القيم الجديدة مش هتنعكس في الـ component بتاعك

# معلومة سريعة في Angular:
 لو عندك component وانت عاوز تـ subscribe لـ observable معين عشان مثلا تجيب داتا من السيرفر فانت غالبا هتعمل حاجة زي كدة
```
class MyComponent{  data: Data;  constructor(private service: MyService){}  ngOnInit(){  this.service.getData().subscribe({  next: res=>{ this.data = data; }  }) } }
```
ادي بصة كدة ع الكود دة, لو ماحستش ان فيه حاجة غلط في الكود يبأة انت عندك مشكلة في كل مشاريع انجولار اللي انت شغال عليها

هو في مشكلتين هنا:
1- مشكلة typing, لان الفترة اللي بين الـ subscription وأول emit للداتا, data هنا هتكون undefined وليس Data
فالمفروض هنا نعدل الكود عشان يبأة كدة
```
data?: Data // equivalent to `data ....

لو دخلت مجال الـ frontend سواء كنت Sinior أو Junior والشيطان لعب في دماغك انك تعمل مشاريع قبل ما تشوف الكورس البريميوم دة توب بسرعة وعد لرشدك في أسرع وقت ممكن
لان في الكورس دة هتتعلم تريكات واسرار برمجية مش موجودة في اي كتاب هتقراه ولا اي كورس تاني
اتعلم Angular من الصفر عن طريق انشاء تطبيقات كاملة برعاية "مبرمجين دوت كوم"
مع تطبيق أفضل الممارسات المطلوبة في المشاريع والشركات العملاقة والـ design patterns و SOLID principals
مبرمجين دوت كوم هي منصة اجتماعية تعليمية للمبرمجين اللي عاوزين يطوروا مهاراتهم ويحسنوا مسيرتهم المهنية

شوف الكورس من هنا وماتنساش تعمل شير عشان تساهم في نشر العلم

ودة كوبون خصم 100% من مبرمجين دوت كوم بشرط عمل ريفيو للكورس علي يود ....

# كورس Angular للمبتدئين:
البوست دة هو بداية سلسلة شاملة لتعلم أنجولار من الصفر مع التدريب العملي
الاول خلينا نتعرف علي انجولار ونعرف اية اللي ممكن نعمله بيه واية اللي انجولار مايقدرش يدهولنا
# اية هو انجولار؟:
انجولار هو frontend framework .. يعني نقدر نعمل بيه الواجهة الأمامية للمواقع
نقصد بالواجهة الامامية أي حاجة عنيك بتشوفها لما بتدخل أي موقع
أما الواجهة الخلفية نقصد بيها أي حاجة بتحصل علي السيرفر زي قواعد البيانات والتعامل مع الملفات

أنجولار بيتكون من مجوعة أجزاء أساسية بنجمعها مع بعض عشان تشكلنا تطبيق كامل
الجزء الاساسي هو الـ component ودة بيمثل الـ view, او بطريقة أبسط: أي عنصر علي الشاشة زي الزراير مثلا والروابط والصور والنصوص وغيرها

# اية هي ميزة Standalone الجديدة في Angular وامتي وازاي نستخدمها؟:
علشان نعرف اية اللي الميزة الجديدة دي بتقدمهولنا خلونا ندي بصة الاول الدنيا كانت ماشية ازاي قبل الـ standalone
قبل كدة كان في حاجة اسمها NgModule ودة عبارة عن Angular module بنجمع فيه الاجزاء كلها سواء components, directives, pipes, services واي حاجة لها علاقة بانجولار
كل جزء بيكون مرتبط بـ NgModule معين, ولازم يكون مرتبط بـ NgModule واحد بس

طب اية المشكلة في الـ pattern دة؟
أولا لو انت محتاج function بسيطة بس كان لازم تـ import الـ module كله بكل اجزاؤه عشان تعرف تستخدم الفنكشن الصغيرة دي, ودة طبعا كان بيسبب بطئ في الابليكيشن بتاعنا
ثانيا بما ان كل جزء مرتبط بـ module معين فدة معناه انه مش ....

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

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

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



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



- template: ودة بيكون فيه كود الـ html ولكن بيدعم bindi ....