كورس فرونت اند Angular بالعربي
أتقن أنجولار من البداية إلى النهاية وابنِ تطبيقات صفحة واحدة جاهزة للإنتاج بثقة. تغطي هذه الدورة كل شيء من أساسيات TypeScript ومعمارية المكونات إلى إدارة الحالة بـ NgRx و SSR ونشر CI/CD. سواء كنت تطور مهاراتك الأمامية أو تنتقل إلى تطوير أنجولار المهني، فهذه هي الخريطة الفنية الكاملة التي تحتاجها.
ماذا ستتعلم:
ستتعلم كيف تنشئ وتبني تطبيقات أنجولار باستخدام الوحدات التعليمية والمكونات والخدمات. ستتقن النماذج المعتمدة على القوالب والنماذج التفاعلية، وتنفذ توجيهاً معقداً مع الحراس والمحللين، وتدير حالة التطبيق بـ NgRx. كما تغطي الدورة تحسين الأداء واختبار الوحدات والاختبار الشامل ونشر الإصدارات الإنتاجية. المواضيع المتقدمة تشمل أنجولار يونيفيرسال لعرض الخادم ومعمارية المايكروفرونت إند مع Module Federation وتطبيقات الويب التقدمية. في النهاية، ستكون لديك المهارات لبناء واختبار ونشر تطبيقات أنجولار قابلة للتوسع.
كيف تدرس بشكل عملي كورس فرونت اند Angular بالعربي
كيف تتدرب كورس فرونت اند Angular بالعربي
لك إذا كنت شركة وتريد تدريب فريقك
في Dedika للشركات، يأتي الكورس مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.
محتوى الدورة
8 فصول • 40 دروسمدة بين 4 و 360 ساعة (أنت تقرر)
الفصل 1إخفاءإخفاء التفاصيلعرض التفاصيلأساسيات أنجولار وإعداد البيئة
أساسيات أنجولار وإعداد البيئة
الدرس 1 • وحدات أنجولار وبدء تشغيل التطبيق
بيشرح وحدات NgModules والـ AppModule الأساسي وكيفية بدء تشغيل التطبيق. بيدي السياق الهيكلي المطلوب قبل بناء المكونات.
الدرس 2 • أساسيات TypeScript لأنجولار
بيقدم أنواع TypeScript والواجهات والديكورات المطلوبة لكتابة كود أنجولار بثقة. بيربط معرفة JavaScript بالنظام المطبَّق بالأنواع الخاص بأنجولار.
الدرس 3 • مقدمة لإطار عمل أنجولار
بيغطي دور أنجولار في تطوير الواجهات الأمامية الحديثة ومعماريتها المستوحاة من MVC. بيحدد الأساس المفاهيمي لكل موضوعات الإطار التالية.
الدرس 4 • إعداد بيئة التطوير
تثبيت وتهيئة Node.js و npm و Angular CLI. بتضمن إن كل طالب عنده بيئة عمل محلية متسقة وقابلة للتكرار.
الدرس 5 • تجهيز أول مشروع أنجولار
استخدام Angular CLI لتوليد مشروع جديد واستكشاف هيكل الملفات المولَّد. ربط إعداد البيئة بإنشاء مشروع عملي.
الفصل 2إخفاءإخفاء التفاصيلعرض التفاصيلالمكونات والقوالب وربط البيانات
المكونات والقوالب وربط البيانات
الدرس 1 • التوجيهات الهيكلية المضمنة
تطبيق *ngIf و *ngFor و *ngSwitch للتحكم في هيكل DOM بشكل ديناميكي. بيوضح كيفية توسيع قدرات القالب بالتوجيهات.
الدرس 2 • ربط الخاصية وربط الحدث
بتعلم تدفق البيانات باتجاه واحد عبر ربط الخاصية ومعالجة أحداث المستخدم عبر ربط الحدث. بتربط منطق المكون بعناصر DOM وتفاعلات المستخدم.
الدرس 3 • صيغة القالب والتعبيرات
بيغطي لغة تعبيرات قالب أنجولار والتنقل الآمن ومتغيرات مرجع القالب. بيمكّن عرض محتوى ديناميكي داخل مكونات العرض.
الدرس 4 • خطافات دورة حياة المكون
بيستكشف تسلسل خطافات دورة الحياة الكاملة من ngOnInit لـ ngOnDestroy. بيعلم متى ولماذا نستخدم كل خطاف للتهيئة والتنظيف.
الدرس 5 • تركيب مكون أنجولار
بيفكك ديكور @Component وخصائص البيانات الوصفية ودورة حياة المكون. بيحدد لبنة البناء لكل عنصر واجهة مستخدم في أنجولار.
الفصل 3إخفاءإخفاء التفاصيلعرض التفاصيلاتصال المكونات والتوجيهات
اتصال المكونات والتوجيهات
الدرس 1 • استعلامات ViewChild و ContentChild
الوصول إلى نسخ المكونات الابن والمحتوى المسقط برمجياً عبر الاستعلامات. بيمكّن التنسيق المتقدم للمكونات خارج ربط القالب.
الدرس 2 • الاتصال من الأب للابن باستخدام @Input
استخدام @Input لتمرير البيانات لأسفل شجرة المكونات والتحقق من صحة الإدخال باستخدام setters. بيحدد نمط تدفق البيانات الأساسي للأسفل في أنجولار.
الدرس 3 • بناء توجيهات هيكلية مخصصة
تنفيذ توجيهات هيكلية باستخدام TemplateRef و ViewContainerRef للتلاعب بـ DOM. بتوسع قدرة الطلاب على إنشاء منطق تخطيط قابل لإعادة الاستخدام.
الدرس 4 • بناء توجيهات سمات مخصصة
إنشاء توجيهات تعدل مظهر العنصر المضيف أو سلوكه دون تغيير هيكل DOM. بتعزز نمط التوجيه المقدَّم في الفصل 2.
الدرس 5 • الاتصال من الابن للأب باستخدام @Output
استخدام @Output و EventEmitter لإرسال أحداث مخصصة لأعلى شجرة المكونات. يكمل نمط الاتصال ثنائي الاتجاه بين الأب والابن.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلالخدمات وحقن التبعيات و HTTP
الخدمات وحقن التبعيات و HTTP
الدرس 1 • إنشاء وتوفير خدمات أنجولار
توليد الخدمات باستخدام CLI وتسجيلها في نطاق الوحدة أو المكون أو الجذر. بيحدد طبقة الخدمات كبيت للمنطق المشترك.
الدرس 2 • عميل HTTP وتكامل REST API
تهيئة HttpClientModule وتنفيذ طلبات GET و POST و PUT و DELETE. ربط طبقة الخدمات بمصادر بيانات الواجهة الخلفية الحقيقية.
الدرس 3 • معالجة الأخطاء و HTTP Interceptors
تنفيذ معالجة الأخطاء العامة باستخدام catchError وتحويل الطلبات/الاستجابات باستخدام interceptors. إنتاج أنماط اتصال HTTP جاهزة للإنتاج.
الدرس 4 • الغوص في حقن التبعيات
استكشاف هرمية DI وتوكنات الحقن وأنواع المزودين. تمكين تحكم دقيق في كيفية حل التبعيات عبر التطبيق.
الدرس 5 • مقدمة لـ RxJS Observables
تقديم Observables و Subjects والعوامل الأساسية المطلوبة للعمل مع واجهات برمجة التطبيقات غير المتزامنة في أنجولار. تحضير الطلاب لأنماط معالجة الأحداث و HTTP التفاعلية.
الفصل 5إخفاءإخفاء التفاصيلعرض التفاصيلالتوجيه والتنقل في أنجولار
التوجيه والتنقل في أنجولار
الدرس 1 • حراس المسار والتحكم في الوصول
تنفيذ حراس CanActivate و CanDeactivate و CanLoad لحماية المسارات. دمج المصادقة والتفويض في طبقة التنقل.
الدرس 2 • التحميل البطيء ومحللات المسار
تقسيم التطبيق إلى وحدات ميزات تُحمَّل عند الطلب وجلب البيانات مسبقًا باستخدام المحللات. تحسين أداء التحميل الأولي وتجربة المستخدم.
الدرس 3 • مسارات متداخلة ومنافذ مسماة
هيكلة مسارات فرعية تحت مسارات أب واستخدام منافذ مسماة لعروض مساعدة. دعم متطلبات التخطيط المعقدة في التطبيقات الكبيرة.
الدرس 4 • إعداد الموجه والتنقل الأساسي
تهيئة RouterModule بتعاريف المسارات وإضافة router-outlet و routerLink. وضع الأساس لكل ميزات التنقل.
الدرس 5 • معاملات المسار وسلاسل الاستعلام
قراءة أجزاء المسار الديناميكية ومعاملات الاستعلام الاختيارية من ActivatedRoute. تمكين صفحات التفاصيل وصفحات القوائم المفلترة.
الفصل 6إخفاءإخفاء التفاصيلعرض التفاصيلنماذج أنجولار: القائمة على القالب والتفاعلية
نماذج أنجولار: القائمة على القالب والتفاعلية
الدرس 1 • النماذج الديناميكية باستخدام FormArray
استخدام FormArray لإضافة وإزالة عناصر تحكم النموذج في وقت التشغيل لبيانات متغيرة الطول. معالجة سيناريوهات حقيقية مثل بنود متكررة.
الدرس 2 • المحققين والتحقق المخصص
تطبيق محققين متزامنين وغير متزامنين وإنشاء دوال تحقق مخصصة قابلة لإعادة الاستخدام. ضمان سلامة البيانات قبل الإرسال.
الدرس 3 • إرسال النموذج وإدارة الحالة
معالجة إرسال النموذج وإعادة تعيينه وحالتي dirty و touched لتقديم تجربة مستخدم مصقولة. ربط بيانات النموذج باستدعاءات الخدمات المقدمة في الفصل 4.
الدرس 4 • النماذج القائمة على القالب
استخدام ngForm و ngModel والمحققين المضمنين لبناء نماذج بشكل تصريحي في القالب. تقديم مفاهيم النماذج بأقل قدر من TypeScript.
الدرس 5 • أساسيات النماذج التفاعلية
بناء النماذج برمجياً باستخدام FormControl و FormGroup و ReactiveFormsModule. توفير تحكم صريح وقابل للاختبار في حالة النموذج والتحقق منه.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلإدارة الحالة والأنماط التفاعلية
إدارة الحالة والأنماط التفاعلية
الدرس 1 • NgRx Entity و DevTools
تبسيط إدارة المجموعات باستخدام NgRx Entity وفحص الحالة باستخدام Redux DevTools. تسريع تطوير وتصحيح أخطاء الميزات كثيفة التخزين.
الدرس 2 • مقدمة لمخزن NgRx
تثبيت NgRx وتعريف الإجراءات والمختزلات والمخزن لجزء ميزة. تأسيس نمط Redux داخل نظام أنجولار.
الدرس 3 • الحالة القائمة على الخدمات باستخدام BehaviorSubject
تخزين ومشاركة الحالة عبر المكونات باستخدام BehaviorSubject في خدمة. توفير حل حالة خفيف قبل تقديم NgRx.
الدرس 4 • تأثيرات NgRx للتأثيرات الجانبية
معالجة العمليات غير المتزامنة مثل استدعاءات HTTP خارج المختزلات باستخدام تأثيرات NgRx. الحفاظ على نقاء المختزلات ومركزية منطق التأثيرات الجانبية.
الدرس 5 • المحددات وتكامل المكونات
إنشاء محددات محفوظة وإرسال الإجراءات من المكونات عبر خدمة Store. ربط مخزن NgRx بطبقة المكونات.
الفصل 8إخفاءإخفاء التفاصيلعرض التفاصيلالأداء والاختبار والنشر
الأداء والاختبار والنشر
الدرس 1 • استراتيجيات النشر وتكامل CI/CD
نشر إصدارات أنجولار على استضافة ثابتة ودمج خطوط أنابيب آلية للتسليم المستمر. إغلاق دورة حياة التطوير من الكود إلى الإنتاج.
الدرس 2 • اختبار وحدات المكونات والخدمات
كتابة اختبارات وحدات باستخدام Jasmine و TestBed للمكونات والخدمات والأنابيب. التحقق من صحة الوحدات الفردية بمعزل قبل التكامل.
الدرس 3 • تحسين الحزمة وتهيئة البناء
تهيئة إصدارات الإنتاج و tree shaking والتحميل التفاضلي لحجم حزمة مثالي. تجهيز التطبيق لقيود النشر الفعلية.
الدرس 4 • الاختبار الشامل باستخدام Cypress
أتمتة اختبار تدفقات المستخدم باستخدام Cypress للتحقق من سلوك التطبيق الكامل. تكملة اختبارات الوحدات بسيناريوهات واقعية قائمة على المتصفح.
الدرس 5 • اكتشاف التغيير وتحسين الأداء
شرح استراتيجيات اكتشاف التغيير الافتراضية و OnPush وأدوات التحليل في أنجولار. تقليل إعادة التصيير غير الضرورية في أشجار المكونات الكبيرة.
شهادتك المعتمدة لإتمام الدورة
هذا الدورة موجهة لك:
مطورو جافاسكريبت: مستعدون لاعتماد إطار عمل أمامي منظم على مستوى المؤسسات.
مطورو React أو Vue: يريدون إضافة خبرة أنجولار إلى أدواتهم المهنية.
مطورو الواجهة الخلفية: يتوسعون لأدوار تشمل الواجهة الأمامية الحديثة.
خريجو علوم الحاسب: يربطون المعرفة الأكاديمية بتطوير أنجولار القياسي في الصناعة.
مستقلو تطوير الويب: يهدفون للتأهل لمشاريع أكبر وأكثر تعقيداً للعملاء.
محولوا المسار المهني: يبنون مهارات أمامية جاهزة للعمل من أساس برمجي قوي.
ماذا يقول طلابنا
دروسكم مثالية. اشتريت الباقة السنوية، وأخيراً أصبح لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقومون به، لقد رشحتكم لأشخاص آخرين...
أحب كيف أن الدروس مباشرة ومركزة وكيف يمكنني تغيير الفصول وتخطي المحتوى الذي لا أحتاجه.
أحب المحتوى وطريقة العرض ونسخ الفيديوهات، مما يسرع العملية!
المنصة سريعة وبسيطة الاستخدام. تنوع المحتوى والفيديوهات التكميلية تساعد كثيراً في التعلم.
أهم الدورات
الأسئلة الشائعة
ما هي Dedika؟
هل الشهادة صالحة في مصر؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف تبدو الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF