كورس تطوير فرونت اند 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