• Home
  • Courses
  • Portfolio
  • Contact
    Tiger 4 CodeTiger 4 Code
    • Home
    • Courses
    • Portfolio
    • Contact

      Angular 2

      • Home
      • Blog
      • Angular 2
      • 11 : Angular2 – Routing التوجيه

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

      • Posted by Schwarztiger
      • Categories Angular 2
      • Date August 8, 2017
      • Comments 0 comment

      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/

       

      Tag:angular 2 routing, Angular environment setup, AngularJs, error handling, mobile development, Web Development, تطوير الويب, شرح angular 2

      • Share:
      author avatar
      Schwarztiger

      Previous post

      10 : Angular2 - Error Handling معالجة الأخطاء
      August 8, 2017

      Next post

      الحلقة 1 : خوارزمية محاكاة التلدين Simulated Annealing Algorithm
      August 10, 2017

      You may also like

      demo_image
      12 : Angular2 – Forms النماذج
      18 August, 2017
      demo_image
      10 : Angular2 – Error Handling معالجة الأخطاء
      8 August, 2017
      demo_image
      9 : Angular2 – CRUD Operations Using HTTP
      4 August, 2017

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Latest Courses

      Android Development

      Android Development

      $950.00
      HTML Tutorial: HTML & CSS for Beginners

      HTML Tutorial: HTML & CSS for Beginners

      $800.00
      Learn WordPress Content Management System

      Learn WordPress Content Management System

      Coming soon
      logo-eduma-the-best-lms-wordpress-theme

      info@tiger4code.com

      Links

      • Courses
      • Portfolio

      Copyright 2019 | Educational, Web & Mobile Development Platform By Tiger 4 Code