كورس تطوير فرونت اند Angular
أتقن Angular من الألف إلى الياء، وابنِ تطبيقات أحادية الصفحة جاهزة للإنتاج بثقة. يغطي هذا المقرر كل شيء بدءًا من أساسيات TypeScript ومعمارية المكونات وصولًا إلى إدارة حالة NgRx، والتصيير من جانب الخادم (SSR)، ونشر CI/CD. سواء كنت ترغب في تطوير مهاراتك في الواجهة الأمامية أو الانتقال إلى تطوير Angular الاحترافي، فهذه هي خارطة الطريق التقنية الكاملة التي تحتاجها.
ماذا ستتعلم:
ستتعلم كيفية بناء وتنظيم تطبيقات Angular باستخدام الوحدات والمكونات والخدمات. ستتقن النماذج الموجهة بالقوالب والنماذج التفاعلية، وتنفذ توجيهًا معقدًا باستخدام الحراس والحلول، وتدير حالة التطبيق باستخدام NgRx. يغطي المقرر أيضًا تحسين الأداء، واختبارات الوحدة والاختبارات الشاملة، ونشر إصدارات الإنتاج. تشمل الموضوعات المتقدمة Angular Universal للتصيير من جانب الخادم، ومعمارية الواجهات الأمامية الصغيرة باستخدام Module Federation، وتكوين تطبيقات الويب التقدمية. بحلول النهاية، ستتمكن من بناء واختبار ونشر تطبيقات Angular قابلة للتوسع.
كيف تدرس بشكل عملي كورس تطوير فرونت اند Angular
كيف تتدرب كورس تطوير فرونت اند Angular
لك أنت كشركة وتريد تدريب فريقك
في Dedika للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.
محتوى الدورة
8 فصول • 40 دروسالمدة بين 4 و 360 ساعة (أنت تقرر)
الفصل 1إخفاءإخفاء التفاصيلعرض التفاصيلأساسيات أنجولار وإعداد البيئة
أساسيات أنجولار وإعداد البيئة
الدرس 1 • وحدات أنجولار وإقلاع التطبيق
يشرح الوحدات NgModule والوحدة الجذر 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 لتمرير البيانات إلى أسفل شجرة المكونات ويتحقق من صحة المدخلات باستخدام المعرفات يؤسس نمط تدفق البيانات الأساسي الهابط في أنجولار.
الدرس 3 • بناء توجيهات هيكلية مخصصة
ينفذ توجيهات هيكلية باستخدام TemplateRef و ViewContainerRef للتحكم في DOM يوسع قدرة المتدربين على إنشاء منطق تخطيط قابل لإعادة الاستخدام.
الدرس 4 • بناء توجيهات سمات مخصصة
ينشئ توجيهات تعدل مظهر العنصر المضيف أو سلوكه دون تغيير هيكل DOM يعزز نمط التوجيه المقدم في الفصل الثاني.
الدرس 5 • اتصال الفرع بالوالد بـ @Output
يستخدم @Output و EventEmitter لإصدار أحداث مخصصة إلى أعلى شجرة المكونات يكمل نمط الاتصال ثنائي الاتجاه بين الوالد والفرع.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلالخدمات وحقن التبعيات و HTTP
الخدمات وحقن التبعيات و HTTP
الدرس 1 • إنشاء خدمات أنجولار وتوفيرها
ينشئ خدمات باستخدام CLI ويسجلها في نطاق الوحدة أو المكون أو الجذر يؤسس طبقة الخدمة كموطن للمنطق المشترك.
الدرس 2 • عميل HTTP وتكامل REST API
يهيئ HttpClientModule وينفذ طلبات GET و POST و PUT و DELETE يربط طبقة الخدمة بمصادر بيانات الواجهة الخلفية الحقيقية.
الدرس 3 • معالجة الأخطاء ومعترضات HTTP
ينفذ معالجة أخطاء شاملة باستخدام catchError وتحويل الطلب/الاستجابة باستخدام المعترضات ينتج أنماط اتصال HTTP جاهزة للإنتاج.
الدرس 4 • التعمق في حقن التبعيات
يستكشف تدرج الحاقن ورموز الحقن وأنواع الموفرين يتيح تحكمًا دقيقًا في كيفية حل التبعيات عبر التطبيق.
الدرس 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 • النماذج القالبية
يستخدم ngForm و ngModel والمصادقات المدمجة لبناء النماذج بشكل تصريحي في القالب يقدم مفاهيم النموذج بأقل قدر من تعقيد TypeScript.
الدرس 5 • أساسيات النماذج التفاعلية
يبني النماذج برمجيًا باستخدام FormControl و FormGroup و ReactiveFormsModule يوفر تحكمًا صريحًا وقابلاً للاختبار في حالة النموذج والتحقق منه.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلإدارة الحالة والأنماط التفاعلية
إدارة الحالة والأنماط التفاعلية
الدرس 1 • NgRx Entity وأدوات التطوير (DevTools)
يبسط إدارة المجموعات باستخدام NgRx Entity ويفحص الحالة باستخدام Redux DevTools يسرع تطوير وتصحيح ميزات المتجر الثقيلة.
الدرس 2 • مقدمة عن NgRx Store
يقوم بتثبيت NgRx وتحديد الإجراءات والمختزلات والمتجر لشريحة ميزة يؤسس نمط Redux داخل نظام أنجولار البيئي.
الدرس 3 • الحالة المعتمدة على الخدمة باستخدام BehaviorSubject
يخزن ويشارك الحالة عبر المكونات باستخدام BehaviorSubject في خدمة يوفر حلاً خفيفًا للحالة قبل تقديم NgRx.
الدرس 4 • تأثيرات NgRx للتأثيرات الجانبية
يعالج العمليات غير المتزامنة مثل استدعاءات HTTP خارج المختزلات باستخدام NgRx Effects يحافظ على نقاء المختزلات ومركزية منطق التأثير الجانبي.
الدرس 5 • المعرفات ودمج المكونات
ينشئ معرفات محفوظة ويوزع الإجراءات من المكونات عبر خدمة المتجر يربط متجر NgRx بطبقة المكونات.
الفصل 8إخفاءإخفاء التفاصيلعرض التفاصيلالأداء والاختبار والنشر
الأداء والاختبار والنشر
الدرس 1 • استراتيجيات النشر وتكامل CI/CD
ينشر إصدارات أنجولار على استضافة ثابتة ويدمج خطوط أنابيب آلية للتسليم المستمر يغلق دورة حياة التطوير من الشفرة البرمجية إلى الإنتاج.
الدرس 2 • اختبار وحدة المكونات والخدمات
يكتب اختبارات وحدة باستخدام Jasmine و TestBed للمكونات والخدمات والأنابيب يتحقق من صحة الوحدات الفردية بمعزل قبل التكامل.
الدرس 3 • تحسين الحزمة (Bundle) وتهيئة الإصدار
يهيئ إصدارات الإنتاج وهز الأشجار (tree shaking) والتحميل التفاضلي لحجم الحزمة الأمثل يهيئ التطبيق لقيود النشر في العالم الحقيقي.
الدرس 4 • الاختبار الشامل من البداية إلى النهاية باستخدام Cypress
يؤتمت اختبار تدفق المستخدم باستخدام Cypress للتحقق من سلوك التطبيق الكامل يكمل اختبارات الوحدة بسيناريوهات واقعية قائمة على المتصفح.
الدرس 5 • اكتشاف التغيير وتحسين الأداء
يشرح استراتيجيات اكتشاف التغيير الافتراضية و OnPush وأدوات التحليل يقلل عمليات إعادة العرض غير الضرورية في أشجار المكونات الكبيرة.
شهادة إتمام معتمدة
هذا الدورة مخصصة لك:
مطورو جافا سكريبت: مستعدون لاعتماد إطار عمل أمامي مهني متكامل على مستوى المؤسسات.
مطورو React أو Vue: راغبون في إضافة خبرة Angular إلى حقيبة أدواتهم المهنية.
مطورو الواجهة الخلفية: يتوسعون إلى أدوار كامل المكدس تتطلب مهارات أمامية حديثة.
خريجو علوم الحاسب: يسدّون الفجوة بين المعرفة الأكاديمية وتطوير Angular وفق المعايير الصناعية.
مطورو الويب المستقلون: يهدفون إلى التأهل لمشاريع عملاء أكبر وأكثر تعقيدًا.
مغيّرو المسار المهني: يبنون مهارات أمامية جاهزة لسوق العمل انطلاقًا من أساس برمجي متين.
ماذا يقول طلابنا
دروسكم مثالية. اشتريت باقة السنة الواحدة وأخيرًا أصبحت لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقدمونه، وقد أوصيت بكم بالفعل لأشخاص آخرين...
أعجبني كيف أن الدروس مباشرة إلى النقطة وكيف يمكنني التنقل بين الفصول وتخطي المحتوى الذي لا أحتاجه.
أحببت المحتوى وأسلوب العرض ونسخ الفيديو، مما يسرّع العملية!
المنصة سريعة وسهلة الاستخدام. تنوع المحتوى والفيديوهات التكميلية يساعدان حقًا في التعلم.
أهم الدورات
الأسئلة الشائعة
من هي Dedika؟
هل الشهادة صالحة في المملكة العربية السعودية؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف هي الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF