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