كورس angular كامل

الدرس 1 • إنشاء أول مشروع Angular لك

استخدم Angular CLI لإنشاء مشروع، واستكشف هيكل ملفاته، وقم بتشغيل سيرفر التطوير. هذا يبني ألفة مع تخطيط مساحة العمل المستخدم طوال الدورة.

الدرس 2 • إعداد بيئة التطوير

قم بتثبيت Node.js و npm و Angular CLI لتجهيز مساحة عمل محلية. هذا يمكن مباشرة من إنشاء المشروع الذي سيتم تغطيته في القسم التالي.

الدرس 3 • أساسيات TypeScript لـ Angular

يقدم هذا القسم أنواع TypeScript والواجهات والمزينات والوحدات كما تُستخدم في Angular، ويضمن قدرة الطلاب على قراءة وكتابة كود Angular بثقة بدءًا من القسم الثاني فصاعدًا.

الدرس 1 • تشريح مكوّن Angular

يحلل ديكور المكوّن والكلاس والقالب والأنماط إلى أدوارها. يؤسس النموذج الذهني لكل عنصر واجهة مستخدم يتم بناؤه في هذه الدورة.

الدرس 2 • توجيهات الخصائص والأنابيب

طبّق توجيهات الخصائص المدمجة مثل ngClass و ngStyle، وحوّل البيانات باستخدام الأنابيب المدمجة. يكمل قدرات القالب قبل الانتقال إلى الخدمات.

الدرس 3 • توجيهات الهيكل المدمجة

يغطي ngIf و ngFor و ngSwitch للعرض الشرطي وعرض القوائم في القوالب. يتيح عرض المحتوى الديناميكي الضروري لواجهات المستخدم الواقعية.

الدرس 4 • صياغة القالب وربط البيانات

يعلم الاستيفاء وربط الخصائص وربط الأحداث والربط ثنائي الاتجاه باستخدام ngModel. يربط منطق المكوّن بـ DOM لواجهات مستخدم تفاعلية.

الدرس 1 • الغوص في حقن التبعيات

يستكشف التسلسل الهرمي لحاقن Angular ورمزات الموفر ونطاق الحقن. يتيح تحكماً دقيقاً في إنشاء الخدمات ومشاركتها عبر الوحدات.

الدرس 2 • إنشاء الخدمات واستخدامها

أنشئ خدمات باستخدام CLI، وغلّف منطق الأعمال، واحقنها في المكوّنات. يوضح مبدأ المسؤولية الواحدة في بنية Angular.

الدرس 3 • فهم NgModules

يشرح التصريحات والاستيرادات والتصديرات والموفّرات في بيانات NgModule الوصفية. يؤسس نظام الوحدة الذي ينظم كل تطبيق Angular.

الدرس 1 • حراس المسار والحلالات

يحمي المسارات بحراس CanActivate و CanDeactivate ويسبق تحميل البيانات باستخدام Resolve. يضمن التنقل الآمن والبيانات المحملة مسبقاً قبل عرض المكوّن.

الدرس 2 • المسارات الفرعية والمنافذ المسماة

يدمج مسارات فرعية داخل وحدات الميزات ويستخدم منافذ مسماة لمشاهدات مساعدة. يدعم التخطيطات المعقدة مثل لوحات المعلومات مع الألواح الجانبية.

الدرس 3 • التحميل الكسول لوحدات الميزات

يقسم التطبيق إلى وحدات ميزات محملة بتكاسل لتقليل حجم الحزمة الأولية، ويحسن مباشرة مقاييس الأداء المغطاة في الأقسام المتقدمة.

الدرس 4 • باراميترات المسار وسلاسل الاستعلام

يقرأ أجزاء المسار الديناميكية وباراميترات الاستعلام الاختيارية باستخدام ActivatedRoute. يتيح مشاهدات التفاصيل والقوائم المفلترة المدفوعة بحالة URL.

الدرس 1 • الأنبوب غير المتزامن والتكامل مع القالب

اشترك في observables مباشرة في القوالب باستخدام الأنبوب غير المتزامن، مما يلغي الحاجة إلى إدارة الاشتراك اليدوية. يقلل من الكود الزائد ويمنع تسرب الذاكرة في المكوّنات.

الدرس 2 • Subjects والبث المتعدد

استخدم Subject و BehaviorSubject و ReplaySubject لبث القيم إلى عدة مشتركين. يتيح أنماط الحالة المشتركة المستخدمة في إدارة الحالة المستندة إلى الخدمة.

الدرس 3 • مشغّلات RxJS الأساسية

طبّق map و filter و switchMap و mergeMap و catchError لتحويل ودمج التدفقات. يجهز الطلاب للتعامل مع متطلبات تحويل البيانات في العالم الواقعي.

الدرس 1 • محاكاة HTTP في التطوير

استخدم HttpClientTestingModule وواجهة برمجة تطبيقات ويب في الذاكرة لمحاكاة استجابات الواجهة الخلفية أثناء التطوير. يفصل تقدم الواجهة الأمامية عن توفر الواجهة الخلفية.

الدرس 2 • استراتيجيات معالجة الأخطاء وإعادة المحاولة

يعالج أخطاء HTTP باستخدام مشغّلات catchError و retry و retryWhen لمكالمات API مرنة. يضمن تدهوراً سلساً وملاحظات أخطاء سهلة الاستخدام.

الدرس 3 • مقاطعات HTTP

أنشئ مقاطعات لإرفاق رموز المصادقة وتسجيل الطلبات وتحويل الاستجابات بشكل شامل. يجمع الاهتمامات المشتركة لـ HTTP دون تعديل استدعاءات الخدمة الفردية.

الدرس 4 • إعداد HttpClient وطلبات GET

قم باستيراد HttpClientModule وحقن HttpClient وأجرِ طلبات GET مكتوبة. يؤسس الأساس لجميع اتصالات الواجهة الخلفية في التطبيق.

الدرس 1 • النماذج الديناميكية باستخدام FormArray

يدير قوائم متغيرة الطول من عناصر التحكم باستخدام FormArray لسيناريوهات النماذج الديناميكية. يدعم حالات الاستخدام مثل إضافة عناوين متعددة أو بنود.

الدرس 2 • أساسيات النماذج التفاعلية

ينشئ النماذج برمجياً باستخدام FormControl و FormGroup و FormBuilder. يتيح منطق نموذج قابل للتوسع والاختبار مدفوع بالكامل من كلاس المكوّن.

الدرس 3 • تجربة المستخدم للنموذج وسهولة الوصول

طبّق حالات touched و dirty و pristine للتحكم في رؤية الخطأ وتحسين تجربة المستخدم للنموذج. يضمن أن النماذج تلبي معايير إمكانية الوصول مع سمات ARIA المناسبة.

الدرس 4 • مدققات مخصصة والتحقق غير المتزامن

يكتب مدققات مخصصة متزامنة وغير متزامنة لفحوصات عبر الحقول ومن جانب السيرفر. يوسع نظام التحقق من Angular لتلبية قواعد الأعمال المعقدة.

الدرس 1 • أساسيات إدارة الحالة

ينفذ حالة قائمة على الخدمة باستخدام BehaviorSubject ويقدم مفاهيم متجر NgRx لحالة قابلة للتوسع. يهيئ الطلاب لاختيار استراتيجية الحالة المناسبة لتعقيد التطبيق.

الدرس 2 • التوجيهات والأنابيب المخصصة

يبني توجيهات خصائص قابلة لإعادة الاستخدام باستخدام HostListener و HostBinding، وينشئ أنابيب مخصصة نقية وغير نقية. يوسع قدرات قالب Angular للاحتياجات الخاصة بالمجال.

الدرس 3 • إسقاط المحتوى والمكوّنات الديناميكية

استخدم ng-content للإسقاط أحادي ومتعدد الفتحات وأنشئ مكوّنات ديناميكياً في وقت التشغيل. يتيح مكوّنات مكتبة واجهة مستخدم مرنة وقابلة لإعادة الاستخدام بدرجة كبيرة.

الدرس 4 • استراتيجيات اكتشاف التغيير

يقارن اكتشاف التغيير Default و OnPush ويطبق OnPush مع بيانات غير قابلة للتغيير و observables. يقلل بشكل كبير من عمليات إعادة العرض غير الضرورية في أشجار المكوّنات الكبيرة.