11 : Angular2 – Routing التوجيه
السلام عليكم ورحمة الله وبركاته
سوف نتحدث اليوم عن احد اهم المواضيع ضمن 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 |
المراجع: