السلام عليكم ورحمة الله وبركاته

سوف نتحدث اليوم عن احد اهم المواضيع ضمن angular 2. ألا وهو التوجيه Routing.

التوجيه Routing

يساعد التوجيه – وكما يوحي الاسم – على “توجيه” المستخدم الى عدة صفحات مختلفة.

ببساطة هو بمثابة موجة ووسيلة التنقل بين الصفحات.

سنوضح فيما يلي الخطوات اللازمة من اجل تنفيذ التوجيه routing ضمن تطبيق angular 2.

الخطوة الأولى:

اضف تاغ “المرجع الرئيسي” dbase reference tag الى ملف

Index.html

والهدف منه هو تحديد الصفحة الاساسية

الخطوة الثانية:

انشأ موجهيين two routes ضمن تطبيقيك.

لفعل ذلك, انشأ ملفين بالاسماء المدرجة فيما يلي:

Inverntory.component.ts

Product.component.ts

الخطوة الثالثة:

ضع الكود التالي ضمن ملف

Product.component.ts

الخطوة الرابعة:

ضع الكود التالي ضمن ملف
Inventory.component.ts

لا يقوم اي من المكونين السابقين, باي شيء خارق للعادة 🙂 ببساطة الهدف منهم ان يتم عرض اسم المكون عن عرض صفحته, فقط لا غير.

اذن, فإن مكون Inventory سيعرض كلمة Inventory للمستخدم.

و مكون Products سيعرض كلمة Products للمستخدم.

 الخطوة الخامسة:

ضع الكود التالي ضمن ملف

App.module.ts

حسنا, سنوضح بعض النقاط من الكود السابق:

• يحوي “appRoutes” على توجيهين اثنين, احدهم الى مكون Appproduct, والآخر الى مكون AppInventory component.
• تم التصريح عن كلي من المكونات component في البداية باستخدام عبارة import.
• عبارة forRoot هدفها اضافة الموجهات الى التطبيق.

الخطوة السادسة:

اضف الكود التالي الى ملف

App.component.ts

من الكود السابق, نجد تاغ
<router-outlet></router-outlet>

وهي بمثابة المكان الذي سيتم عرض المكون component الذي سيتم اختياره تبعا لخيار المستخدم.

 

الآن, بعد حفظ كل التغييرات السابقة, وتشغيل التطبيق باستخدام npm. اذهب الى المتصفح, ويجب ان ترى الخرج التالي:

عند الضغط على رابط Inventory, سنظهر الخرج التالي:

 

التعامل مع اخطاء التوجيه

بإمكاننا – كما في الدرس السابق – ان نضيف امكانية التعامل مع اخطاء التوجيه هنا ايضا.

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

سنوضع فيما يلي كيف بإمكاننا تحقيق ذلك.

الخطوة الأولى:

اضافة مكون ليشير الذي سيتم توجيه المستخدم  عليه عند طلب صفحة غير موجودة

PageNotFound component

وليكن بالاسم التالي:

NotFound.component.ts

كما يلي:

الخطوة الثانية:

اضف الكود التالي الى الملف السابق.

اضف الكود التالي الى ملف

App.module.ts

يجب توضيح النقط التالية عن الكود السابق:

• تم اضافة موجه اضافي route
  له المسار path: ‘**’
  والمكون PageNoteFoundComponent.
  حيث تم استخدام المسار ‘**’ للاشارة الى اي مسار توجيه لم يتوافق مع اي من المسارات السابقة المذكورة ضمن الموجه. حيث سوف يتم توجيه المستخدم عندها الى مكون PageNoteFoundComponent

 

احفظ كل التعديلات التي قمت بإجرائها, ومن ثم شغل التطبيق باستخدام Npm.

اذهب الى المتصفح, وسوف ترى الخرج التالي عند ادراج اي مسار غير صحيح.

–  عدل في الرابط كما هو موضح بالشكل ادناه لتحصل على النتيجة المرجوه.

ارجو ان تكون فكرة التوجيه قد توضحت ضمن المثال السابق, لانها مهمة جدا ضمن angular 2

في الحلقة القادمة سوف نتحدث عن موضوع “Navigation”

والى ذلك الحين, استودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة	المصطلح
مفتوح المصدر	Open source
اطار عمل	framework
تطبيق	application
واجهات العرض	Views
النشر	Deployment
مخدم الويب	Web server
منصة عمل	Platform
موديول	Module
التعامل مع الأخطاء	Error handling
التوجيه	Routing
مكون	Component
استيراد	import
قالب	template
الموجهات	Directives

المراجع:

1. https://www.tutorialspoint.com/angular2/index.htm
2. الموقع الرسمي https://angular.io/