11 : Angular2 – Routing التوجيه

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

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

routing.jpg

التوجيه Routing

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

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

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

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

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

Index.html

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

1 - base ref.JPG

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

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

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

Inverntory.component.ts

Product.component.ts

2 open_editors.jpg.png

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

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

Product.component.ts

3.JPG

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

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

4.JPG

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

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

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

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

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

App.module.ts

5.JPG

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

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

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

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

App.component.ts

6.JPG

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

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

 

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

output 1 product.jpg.png

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

output 2.png

 

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

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

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

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

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

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

PageNotFound component

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

NotFound.component.ts

كما يلي:

eh 1 - notfound.jpg.png

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

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

eh 2.JPG

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

App.module.ts

eh 3.JPG

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

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

 

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

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

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

eh result pagenotfound.jpg.png

ارجو ان تكون فكرة التوجيه قد توضحت ضمن المثال السابق, لانها مهمة جدا ضمن 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/

 

Advertisements

, , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: