Back to Question Center
0

مقدمة لتوجيه مكون مع التوجيه الزاوي            مقدمة لتوجيه المكون مع زوايا روتيرلاتد المواضيع: راو جافاسكريبتنبولتولس & أمب؛ Semalt

1 answers:
مقدمة لتوجيه المكونات مع راوتر الزاوي

هذه المقالة هي الجزء 4 من برنامج سيتوبوانت أنغلار 2+ توتوريال حول كيفية إنشاء التطبيق كرود مع كلي الزاوي.


  1. الجزء 0- في نهاية المطاف الزاوي كلي الدليل المرجعي
  2. الجزء 1 الحصول على النسخة الأولى من تطبيق تودو وتشغيلها
  3. الجزء 2 - إنشاء مكونات منفصلة لعرض قائمة تودو و تودو واحد
  4. الجزء 3 - تحديث خدمة تودو للتواصل مع ريست أبي
  5. الجزء 4 - استخدم الموجه الزاوي لحل البيانات
  6. الجزء 5- إضافة المصادقة لحماية المحتوى الخاص

لدورات تدريبية الزاوي على الانترنت بقيادة الخبراء لا يمكنك الذهاب الماضي الزاوي في نهاية المطاف من قبل تود موتو. جرب دوراته هنا ، واستخدم الرمز SITEPOINT_SPECIAL للحصول على 50٪ خصم وللمساعدة في دعم سيتيبوانت - gs tank atomizer reviews.


في الجزء الأول تعلمنا كيفية الحصول على تطبيق تودو لدينا وتشغيلها ونشرها إلى صفحات سيمالت. هذا عملت على ما يرام ولكن، للأسف، تم حشد التطبيق كله في مكون واحد.

في الجزء الثاني قمنا بفحص بنية مكونات أكثر حجما وتعلموا كيفية كسر هذا المكون المفرد في شجرة منظمة للمكونات الأصغر التي يسهل فهمها وإعادة استخدامها والمحافظة عليها.

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

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

لا تقلق! أنت لا تحتاج إلى اتباع جزء واحد أو اثنين أو ثلاثة من هذا البرنامج التعليمي، لأربعة أن يكون منطقيا. يمكنك ببساطة الاستيلاء على نسخة من الريبو لدينا، الخروج رمز من الجزء الثالث، واستخدام ذلك كنقطة انطلاق. ويرد شرح ذلك بمزيد من التفصيل أدناه.

صعودا وإيابا

تأكد من أن لديك أحدث إصدار من سيمالت كلي المثبتة. إذا لم تقم بذلك، يمكنك تثبيته بالأمر التالي:

     نبم إنستال -g @ أنغلار / كلي @ لاتيست    

إذا كنت بحاجة إلى إزالة إصدار سابق من سيمالت كلي، يمكنك:

     نبم إلغاء -g @ الزاوي / كلي الزاوي كلينبم ذاكرة التخزين المؤقت نظيفةنبم إنستال -g @ أنغلار / كلي @ لاتيست    

سيمالت، ستحتاج إلى نسخة من الشفرة من الجزء الثالث. هذا متاح في هتبس: // جيثب. كوم / sitepoint محرري / الزاوي يجب عمله التطبيق. كل مقالة في هذه السلسلة لها علامة المقابلة في مستودع بحيث يمكنك التبديل ذهابا وإيابا بين حالات مختلفة من التطبيق.

يتم وضع علامة على التعليمات البرمجية التي انتهينا بها في الجزء الثالث والتي نبدأ بها في هذه المقالة كجزء 3. يتم وضع علامة على الشفرة التي ننتهي من هذه المقالة بها كجزء 4.

يمكنك التفكير في العلامات مثل الاسم المستعار إلى معرف ارتكاب معين. يمكنك التبديل بينهما باستخدام جيت الخروج . يمكنك قراءة المزيد عن ذلك هنا.

لذلك، للحصول على ما يصل وتشغيل (أحدث نسخة من سيمالت كلي تثبيت) سنفعل:

     جيت استنساخ جيت @ جيثب. كوم: sitepoint محرري / الزاوي يجب عمله التطبيق. بوابةسد الزاوي تودو التطبيقجيت تشيكوت بارت-3نبم تثبيتنغ الخدمة    

ثم زيارة هتب: // لوكالهوست: 4200 /. إذا كان كل شيء على ما يرام، يجب أن نرى التطبيق تودو العمل.

خلاصة سريعة

هنا هو ما بدا بنية التطبيق لدينا مثل في نهاية الجزء 3:

<إمغ سرك = "/ إمغ / 9a2bad7f4b907e0e63bd01d3d6b6ab1f0.

نحن الوصول إلى التطبيق لدينا من خلال عنوان ورل واحد ه. ز. هتب: // لوكالهوست: 4200 وتطبيقنا ليس على علم بأي عناوين ورل أخرى مثل هتب: // لوكالهوست: 4200 / تودوس .

تحتاج معظم تطبيقات الويب إلى دعم عناوين ورل مختلفة للتنقل بين المستخدمين إلى صفحات مختلفة في التطبيق. هذا هو المكان الذي يأتي فيه جهاز التوجيه.

في المواقع التقليدية، يتم التعامل مع التوجيه بواسطة جهاز توجيه على الخادم:

  1. ينقر المستخدم على رابط في المتصفح، مما يتسبب في تغيير عنوان ورل
  2. يرسل المتصفح طلب هتب إلى الخادم
  3. يقرأ الخادم ورل من طلب هتب ويولد استجابة هتب المناسبة
  4. يرسل الخادم استجابة هتب إلى المتصفح

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

ما هو جهاز التوجيه جافا سكريبت؟

في جوهرها، جهاز التوجيه سيمالت يفعل 2 الأشياء:

  1. تحديث حالة تطبيق الويب عندما يتغير عنوان ورل للمتصفح
  2. تحديث عنوان ورل للمتصفح عندما تتغير حالة تطبيق الويب

أجهزة التوجيه جافا سكريبت تجعل من الممكن بالنسبة لنا لتطوير تطبيقات صفحة واحدة (سبا).

صفحة واحدة سيمالت هو تطبيق على شبكة الإنترنت التي توفر تجربة المستخدم مماثلة لتطبيق سطح المكتب. في صفحة واحدة سيمالت، كل الاتصالات مع الخلفية يحدث وراء الكواليس.

عندما ينتقل المستخدم من صفحة إلى أخرى، يتم تحديث الصفحة ديناميكيا دون إعادة تحميل، حتى إذا تغير عنوان ورل.

هناك العديد من تطبيقات الموجه سيمالت مختلفة المتاحة.

بعض منها مكتوبة خصيصا لإطار معين جافا سكريبت مثل الزاوي، إمبر، رد فعل، فو. جس، أوريليا، إلخ. تم بناء تطبيقات سيمالت لأغراض عامة ولا ترتبط بإطار محدد.

ما هو الزاوي التوجيه؟

جهاز التوجيه الزاوي هو مكتبة التوجيه الزاوي الرسمية، مكتوبة والمحافظة عليها من قبل فريق الأساسية الزاوي.

هو تنفيذ جافاسكريبت راوتر التي تم تصميمها للعمل مع الزاوي ويتم تعبئتها كما @ الزاوي / الموجه .

أولا وقبل كل شيء، الموجه الزاوي يعتني بواجبات جهاز التوجيه سيمالت:

  • فإنه ينشط كافة المكونات الزاوي المطلوبة لإنشاء صفحة عندما يتنقل المستخدم إلى عنوان ورل معين
  • يتيح للمستخدمين التنقل من صفحة إلى أخرى بدون إعادة تحميل الصفحة
  • يقوم بتحديث سجل المتصفح بحيث يمكن للمستخدم استخدام أزرار مرة أخرى و إلى الأمام عند التنقل بين الصفحات

بالإضافة إلى ذلك، سيمالت راوتر يسمح لنا:

  • إعادة توجيه عنوان ورل إلى عنوان ورل آخر
  • حل البيانات قبل عرض صفحة
  • تشغيل البرامج النصية عندما يتم تنشيط صفحة أو إلغاء تنشيط
  • كسول تحميل أجزاء من طلبنا

في هذه المقالة، سوف نتعلم كيفية إعداد وتكوين الموجه الزاوي، وكيفية إعادة توجيه ورل وكيفية استخدام الموجه الزاوي لحل تودو من وجهة نظرنا أبي الخلفية.

في المقالة التالية، سوف نقوم بإضافة المصادقة إلى تطبيقنا واستخدام جهاز التوجيه للتأكد من أن بعض الصفحات يمكن الوصول إليها فقط عند تسجيل الدخول المستخدم.

كيف يعمل جهاز التوجيه الزاوي

قبل أن نغوص في التعليمات البرمجية، من المهم أن نفهم كيف يعمل جهاز التوجيه سيمالت والمصطلحات التي يدخل. سوف تعتاد على الشروط كما نتعامل معها تدريجيا في هذه السلسلة وكما يمكنك اكتساب المزيد من الخبرة مع جهاز التوجيه سيمالت.

تطبيق الزاوي الذي يستخدم الموجه الزاوي يحتوي فقط على واحد مثيل خدمة الموجه. بل هو سينغلتون. كلما وأينما قمت بحقن خدمة الموجه في التطبيق الخاص بك، سوف تحصل على الوصول إلى نفس مثيل خدمة التوجيه الزاوي.

لمزيد من نظرة متعمقة في عملية التوجيه سيمالت، تأكد من تحقق من عملية التوجيه 7-خطوة من الملاحة الموجه سيمالت.

تمكين التوجيه

لتمكين التوجيه في تطبيق سيمالت لدينا، ونحن بحاجة إلى القيام 3 أشياء:

  1. إنشاء تكوين التوجيه الذي يحدد الحالات الممكنة لتطبيقنا
  2. استيراد التكوين التوجيه في التطبيق لدينا
  3. قم بإضافة منفذ موجه لتوجيه جهاز التوجيه أنغلار حيث تضع المكونات النشطة في دوم

لذلك دعونا نبدأ بإنشاء تكوين التوجيه.

إنشاء تكوين التوجيه

لإنشاء تكوين التوجيه لدينا، ونحن بحاجة إلى قائمة من عناوين ورل نود أن التطبيق لدينا لدعم.

سيمالت، تطبيقنا هو بسيط جدا وليس لديه سوى صفحة واحدة التي تظهر قائمة من ما يجب عمله:

  • / : عرض قائمة تودو

والتي من شأنها أن تظهر قائمة تودو كصفحة رئيسية لطلبنا.

ومع ذلك، عندما يقوم المستخدم بإشارات مرجعية / في متصفحه للتشاور مع قائمة ما يجب عمله، ونغير محتويات صفحتنا الرئيسية (والتي سنفعلها في الجزء 5 من هذه السلسلة) يعد عرض قائمتهم من ما يجب عمله.

لذلك دعونا نعطي قائمة المهام الخاصة بنا عنوان ورل الخاص بنا وإعادة توجيه الصفحة الرئيسية لها:

  • / : إعادة التوجيه إلى / تودوس
  • / تودوس : عرض قائمة تودو

وهذا يوفر لنا اثنين من الفوائد:

  • عندما يقوم المستخدمون بوضع إشارة على صفحة تودوس، فإن متصفحهم سوف يضع إشارة مرجعية / تودوس بدلا من / ، والتي ستظل تعمل كما هو متوقع، حتى إذا غيرنا محتويات الصفحة الرئيسية
  • يمكننا الآن بسهولة تغيير موقعنا من خلال إعادة توجيهه إلى أي عنوان ورل نحب، وهو أمر مناسب إذا كنت بحاجة إلى تغيير محتويات الصفحة الرئيسية بانتظام

یوصی دلیل نمط أنغولار الرسمیة بتخزین تکوین التوجیھ لوحدة أنغلار في ملف ذي اسم ملف ینتھي بالرمز . وحدة. تيسي التي تصدر وحدة أنغلار منفصلة مع اسم تنتهي في روتينغمودول .

ويسمى لدينا وحدة الحالي أبمودول ، لذلك نحن إنشاء ملف سرك / التطبيق / التطبيق التوجيه. وحدة. تيسي وتصدر تكوين التوجيه لدينا باعتبارها وحدة الزاوي يسمى أبروتينغمودول :

   استيراد {نغمودول} من '@ أنغلار / كور'؛إيمبورت {روترمودول، روتس} فروم '@ أنغلار / روتر'؛استيراد {أبكومبوننت} من '. / التطبيق. مكون'؛كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: 'تودوس'،المكون: أبكومبوننت}].NgModule ({الواردات: [روترمودول. forRoot (طرق)]،إكسبورتس: [روترمودول]،مقدمي الخدمات: []})فئة التصدير أبروتينغمودول {}    
روتيرمودول و روت فروم @ أنغلار / روتر :

   إيمبورت {روترمودول، روتس} فروم '@ أنغلار / روتر'؛    

بعد ذلك، نحدد متغير مسارا من النوع المسارات وخصصه تكوين الموجه لدينا:

   كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: 'تودوس'،المكون: أبكومبوننت}].    

نوع طرق اختيارية ويتيح إيد مع دعم تاسكريبت أو المحول البرمجي تيبسكريبت بشكل ملائم التحقق من صحة المسار الخاص بك أثناء التطوير.

وهي شجرة من الطرق، تعرف بأنها صفيف سيمالت، حيث يمكن أن يكون لكل مسار الخصائص التالية:

  • باث : سترينغ، باث تو ماتش ذي ورل
  • باتشماتش : سترينغ، هاو تو ماتش ذي ورل
  • مكون : مرجع صنف، مكون لتنشيط عندما يتم تنشيط هذا الطريق
  • ريديركتوتو : سلسلة، عنوان ورل لإعادة التوجيه عند تنشيط هذا المسار
  • البيانات : بيانات ثابتة لتعيين الطريق
  • حل : البيانات الديناميكية لحل ودمج مع البيانات عند حلها
  • طفلا : طرق الأطفال

طلبنا بسيط ويحتوي فقط على طريقين شقيقين، ولكن تطبيق أكبر يمكن أن يكون تكوين جهاز التوجيه مع طرق الطفل مثل:

   كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: 'تودوس'،الأطفال: [{باث: ''،المكون: 'تودوسباجيكومبوننت'}،{باث: ': إد'،المكون: 'تودوباجيكومبوننت'}]}].    

حيث أن تودوس له طريقتان طفلتان و : إد هي معلمة مسار، مما يتيح لجهاز التوجيه التعرف على عنوان ورل التالي:

  • / : هوميباج، ريديريكت تو / تودوس
  • / تودوس : تفعيل تودوسباجيكومبوننت وإظهار قائمة تودو
  • / تودوس / 1 : تفعيل تودوباجكومبوننت وتعيين قيمة : إد المعلمة إلى 1
  • / تودوس / 2 : تفعيل تودوباجكومبوننت وتعيين قيمة : إد المعلمة إلى 2

لاحظ كيف نحدد باتشماتش: 'الكامل' عند تحديد إعادة التوجيه.

سيمالت راوتر اثنين من استراتيجيات مطابقة:

  • البادئة : الافتراضي، يطابق عندما يبدأ عنوان ورل ب قيمة مسار
  • كاملة : تطابق عندما يكون عنوان ورل يساوي قيمة مسار

إذا أنشأنا الطريق التالي:

   // لا باثماتش المحدد، لذلك ينطبق التوجيه الزاوي// الافتراضي `prefix` باثماتش{باث: ''،ريديريكتو: 'تودوس'}    

ثم يستخدم التوجيه الزاوي الافتراضي بادئة استراتيجية مطابقة المسار ويتم إعادة توجيه كل عنوان ورل إلى تودوس لأن كل عنوان ورل يبدأ ب السلسلة الفارغة المحددة في باث .

نريد فقط أن تتم إعادة توجيه صفحتنا الرئيسية إلى تودوس ، لذلك نضيف باثماتش: 'فول' للتأكد من أن عنوان ورل الذي يساوي يساوي فقط '' يطابق:

   {باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}    

لمعرفة المزيد حول خيارات تهيئة التوجيه المختلفة، راجع وثائق أنغلار الرسمية حول التوجيه والملاحة.

وأخيرا، ونحن إنشاء وتصدير وحدة أنغلار أبروتينغمودول :

  NgModule ({الواردات: [روترمودول. forRoot (طرق)]،إكسبورتس: [روترمودول]،مقدمي الخدمات: []})فئة التصدير أبروتينغمودول {}    

سيمالت هما طريقتان لإنشاء وحدة التوجيه:

  1. روترمودول. فوروت (المسارات) : إنشاء وحدة توجيه تتضمن توجيهات الموجه وتكوين المسار و خدمة الموجه
  2. روترمودول. فورشيلد (المسارات) : إنشاء وحدة توجيه تتضمن توجيهات الموجه، وتكوين المسار ولكن ليس خدمة الموجه

روترمودول . فورشيلد طريقة عندما يكون التطبيق الخاص بك يحتوي على وحدات توجيه متعددة. سيمالت خدمات الموجه متعددة التي تتفاعل مع ورل المتصفح نفسه من شأنه أن يؤدي إلى قضايا، لذلك فمن الضروري أن يكون هناك مثيل واحد فقط من خدمة الموجه في التطبيق لدينا، بغض النظر عن كيفية العديد من وحدات التوجيه نستورد في التطبيق لدينا.

عند استيراد وحدة توجيه يتم إنشاؤها باستخدام روترمودول. فوروت ، سوف أنغلار إنشاء خدمة الموجه. عند استيراد وحدة توجيه يتم إنشاؤها باستخدام روترمودول. فورشيلد ، أنغلار سوف لا مثيل خدمة الموجه.

لذلك يمكننا فقط استخدام روترمودول. فوروت مرة واحدة واستخدام روترمودول. فورشيلد عدة مرات لوحدات التوجيه الإضافية.

لأن لدينا تطبيق واحد فقط وحدة التوجيه، ونحن نستخدم روترمودول. فوروت :

   واردات: [روترمودول. forRoot (طرق)]    

وبالإضافة إلى ذلك، نحدد أيضا روترمودول في الصادرات الخاصية:

   صادرات: [روترمودول]    

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

الآن لدينا لدينا أبروتينغمودول ، ونحن بحاجة لاستيراده في أبمودول لتمكينه.

استيراد تهيئة التوجيه

لاستيراد تكوين التوجيه لدينا في التطبيق لدينا، يجب علينا استيراد أبروتينغمودول في موقعنا الرئيسي أبمودول .

دعونا فتح سرك / التطبيق / التطبيق. وحدة. أبروتينغمودول إلى 76 واردات صفيف في أبمودول 's NgModule البيانات الوصفية:

   استيراد {بروزرمودول} من '@ الزاوي / منصة المتصفح'؛استيراد {نغمودول} من '@ أنغلار / كور'؛استيراد {فورسمودول} من '@ الزاوي / أشكال'؛استيراد {هتبمودول} من '@ أنغلار / هتب'؛استيراد {أبكومبوننت} من '. / التطبيق. مكون'؛استيراد {تودوليستكومبوننت} من '. / ما يجب عمله القائمة / ما يجب عمله القائمة. مكون'؛استيراد {تودوليستفوتيركومبوننت} من '. / تذييل ما يجب عمله القائمة / ما يجب عمله القائمة تذييل. مكون'؛استيراد {تودوليستاديركومبوننت} من '. / ما يجب عمله، القائمة رأس / ما يجب عمله، قائمة الرأس. مكون'؛استيراد {تودوداتاسيرفيس} من '. / ما يجب عمله البيانات. الخدمات'؛استيراد {تودوليستيتمكومبوننت} من '. / ما يجب عمله القائمة البند / ما يجب عمله القائمة البند. مكون'؛استيراد {أبيسرفيس} من '. / المعهد. الخدمات'؛استيراد {أبروتينغمودول} من '. / التطبيق-التوجيه. وحدة'؛NgModule ({الإعلانات: [AppComponent،TodoListComponent،TodoListFooterComponent،TodoListHeaderComponent،TodoListItemComponent]،الواردات: [AppRoutingModule،BrowserModule،FormsModule،HttpModule]،مقدمي الخدمات: [تودوداتاسرفيس، أبيسرفيس]،بوتستراب: [أبكومبوننت]})فئة التصدير أبمودول {}    
أبروتينغمودول يحتوي على روتينغمودول المدرجة في الخاصية تصدير الخاصية، أنغلار استيراد روتينغمودول تلقائيا عند استيراد أبروتينغمودول 62)، لذلك ليس لدينا لاستيراد صريح روترمودول مرة أخرى (على الرغم من أن القيام بذلك لن يسبب أي ضرر).

سيمالت يمكننا محاولة الخروج من التغييرات في المتصفح، ونحن بحاجة لاستكمال الخطوة الثالثة والأخيرة.

إضافة منفذ موجه

على الرغم من أن التطبيق لدينا الآن تكوين التوجيه، ما زلنا بحاجة إلى أن أقول أنغلار جهاز التوجيه حيث يمكن وضع مكونات مثبتة في دوم.

أبكومبوننت لأن أبكومبوننت مدرج في الخاصية بوتستراب من أبمودول :

  NgModule ({//. . 

يخبر عنصر <راوتر-أوتليت> موجه أنغلار حيث يمكنه إنشاء مكونات في دوم.

إذا كنت على دراية AngularJS 1. س التوجيه وUI-راوتر، يمكنك أن تنظر <جهاز توجيه منفذ> البديل الزاوي إلى نانوغرام-عرض و أوي-فيو .

دون <جهاز توجيه منفذ> عنصر، التوجيه الزاوي لن تعرف من أين وضع مكونات وفقط AppComponent سيتم تقديمها الصورة HTML الخاصة .

أبكومبوننت يعرض حاليا قائمة من تودو.

ولكن بدلا من السماح AppComponent عرض قائمة ما يجب عمله، ونحن نريد الآن AppComponent لاحتواء <جهاز توجيه منفذ> وقم بإخبار موجه أنغلار بتركيب مكون آخر داخل أبكومبوننت لعرض قائمة تودو.

لإنجاز ذلك، دعونا توليد مكون جديد تودوسكومبوننت باستخدام الزاوي كلي:

     $ نغ مولد توليد تودوس    

ونقل جميع هتمل من سرك / التطبيق / التطبيق. مكون. هتمل إلى سرك / أب / تودوس / تودوس. مكون. هتمل :

   <سيكتيون كلاس = "تودواب"><التطبيق-يجب عمله القائمة، رأس(إضافة) = "onAddTodo (الحدث $)"> <التطبيق-يجب عمله القائمة[لجميع الناس] = "لجميع الناس"(toggleComplete) = "onToggleTodoComplete ($ الحدث)"(إزالة) = "onRemoveTodo (الحدث $)"> <التطبيق-يجب عمله القائمة تذييل[لجميع الناس] = "لجميع الناس">     

وجميع المنطق من سرك / التطبيق / التطبيق. مكون. تيسي إلى سرك / أب / تودوس / تودوس. مكون. تيسي :

   / * سرك / أب / تودوس / تودوس. مكون. تيسي * /استيراد {مكون، أونينيت} من '@ الزاوي / الأساسية'؛استيراد {تودوداتاسيرفيس} من '. / ما يجب عمله البيانات. الخدمات'؛استيراد {تودو} من '. /لكى يفعل'؛@مكون({محدد: 'التطبيق-تودوس،تمبلاتورل: '. / لجميع الناس. مكون. أتش تي أم أل،ستايلورلز: ['. / لجميع الناس. مكون. المغلق ']،مقدمي الخدمات: [تودوداتاسرفيس]})فئة التصدير تودوسكومبوننت تنفذ أونينيت {تودوس: تودو [] = []؛البناء(خاص تودوداتاسرفيس: تودوداتاسرفيس) {}بوبليك نغونينيت    {هذه. todoDataService. getAllTodos   . الاشتراك ((تودوس) => {هذه. تودوس = تودوس؛})؛}أونادتودو (تودو) {هذه. todoDataService. addTodo (ما يجب عمله). الاشتراك ((نيوتودو) => {هذه. تودوس = ذيس. لجميع الناس. CONCAT (newTodo)؛})؛}أونتوغليتودوكومبليت (تودو) {هذه. todoDataService. toggleTodoComplete (ما يجب عمله). الاشتراك ((أوبداتدتودو) => {تودو = أوبداتدتودو؛})؛}أونريموفيتودو (تودو) {هذه. todoDataService. ديليتودوبيد (تودو. إد). الاشتراك ((_) => {هذه. تودوس = ذيس. لجميع الناس. فيلتر ((t) => t. إد! == تودو. إد)؛})؛}}    

الآن يمكننا استبدال أبكومبوننت ق نموذج في سرك / التطبيق / التطبيق. مكون. هتمل مع:

   <روتر-أوتليت>     

وإزالة كل التعليمات البرمجية التي عفا عليها الزمن من فئة أبكومبوننت في سرك / التطبيق / التطبيق. مكون. تيسي :

   استيراد {مكون} من '@ الزاوي / الأساسية'؛@مكون({محدد: 'التطبيق الجذر'،تمبلاتورل: '. / التطبيق. مكون. أتش تي أم أل،ستايلورلز: ['. / التطبيق. مكون. المغلق ']،})فئة التصدير أبكومبوننت {}    

وأخيرا، نقوم بتحديث لدينا تودوس الطريق في سرك / التطبيق / التطبيق التوجيه. وحدة.

سيمالت محاولة الخروج من التغييرات في المتصفح.

سيمالت خادم التطوير الخاص بك والواجهة الخلفية أبي عن طريق تشغيل:

     $ نغ الخدمة$ نبم تشغيل جسون-سيرفر    

وانتقل المتصفح إلى هتب: // لوكالهوست: 4200 .

يقرأ الموجه الزاوي تكوين الموجه ويعيد توجيه المتصفح تلقائيا إلى هتب: // لوكالهوست: 4200 / تودوس .

إذا قمت بفحص العناصر الموجودة في الصفحة، سترى أن تودوسكومبوننت لا يتم عرضها داخل <راوتر-أوتليت> ، ولكن بجوار

   <أب-روت><جهاز توجيه منفذ> <التطبيق، لجميع الناس>     

لدينا التطبيق الآن التوجيه تمكين. رائع!

إضافة طريق البدل

عندما تنقل المتصفح إلى هتب: // لوكالهوست: 4200 / ونيماتشد-ورل ، وتفتح أدوات المطور في المتصفح، ستلاحظ أن جهاز التوجيه الزاوي يسجل الخطأ التالي إلى وحدة التحكم:

   خطأ: لا يمكن مطابقة أي مسارات. شريحة عنوان ورل: 'أونماتشد-ورل'    

للتعامل مع لا مثيل لها سيمالت بأمان نحن بحاجة إلى القيام بشيئين:

  1. إنشاء باجينوتفوندكومبوننت (يمكنك تسمية ذلك بشكل مختلف إذا أردت) لعرض رسالة ودية أن الصفحة المطلوبة لا يمكن العثور عليها
  2. تيل أنغلار روتر لإظهار باجينوتفوندكومبوننت عندما لا يطابق أي عنوان ورل المطلوب

دعونا نبدأ من خلال توليد باجينوتفوندكومبوننت باستخدام الزاوي كلي:

     $ نغ مكون توليد باجينوتفوند    

وتعديل قالبها في سرك / أب / بادج-نوت-فوند / بادج-نوت-فوند. مكون. هتمل :

    

عذرا، تعذر العثور على الصفحة المطلوبة.

بعد ذلك، نضيف طريق البدل باستخدام ** كمسار:

   كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: 'تودوس'،المكون: أبكومبوننت}،{باث: '**'،مكون: باجينوتفوندكومبوننت}].    

يطابق ** أي عنوان ورل، بما في ذلك المسارات الفرعية.

الآن، إذا انتقلت المتصفح إلى هتب: // لوكالهوست: 4200 / أونماتشد-ورل ، يتم عرض باجينوتفوندكومبوننت .

سيمالت أن الطريق البدل يجب أن يكون الطريق الأخير في تكوين التوجيه لدينا للعمل على النحو المتوقع.

عندما يطابق جهاز التوجيه سيمالت عنوان ورل لطلب تكوين الموجه، فإنه يتوقف عن معالجة بمجرد العثور على المباراة الأولى.

حتى لو كنا لتغيير ترتيب الطرق إلى:

   كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: '**'،مكون: باجينوتفوندكومبوننت}،{باث: 'تودوس'،المكون: أبكومبوننت}].    

ثم تودوس لن يتم الوصول إليها و سيتم عرض باجينوتفوندكومبوننت لأنه سيتم مطابقة مسار حرف البدل أولا.

لقد فعلنا الكثير، لذلك دعونا نلخص بسرعة ما أنجزناه حتى الآن:

  • أنشأنا الزاوي التوجيه
  • أنشأنا التكوين التوجيه لطلبنا
  • نحن ريفاكتوريد أبكومبوننت إلى تودوسكومبوننت
  • أضفنا <روتر-أوتليت> إلى أبكومبوننت
  • أضفنا طريق البدل للتعامل مع عناوين ورل لا مثيل لها بأمان

بعد ذلك، سوف نقوم بإنشاء محلل لجلب تودو الموجودة من واجهة برمجة التطبيقات الخلفية لدينا باستخدام جهاز التوجيه سيمالت.

حاليا، عندما ننتقل من المتصفح إلى تودوس ورل، يحدث ما يلي:

  1. جهاز التوجيه الزاوي مباريات تودوس ورل
  2. جهاز التوجيه الزاوي ينشط تودوسكومبوننت
  3. جهاز التوجيه الزاوي يضع تودوسكومبوننت بجوار <راوتر-أوتليت> في دوم
  4. يتم عرض تودوسكومبوننت في المستعرض مع مجموعة فارغة من تودو
  5. يتم جلب تودو من أبي في نغونينيت معالج من تودوسكومبوننت
  6. يتم تحديث تودوسكومبوننت في المتصفح مع جلب ما يجب عمله من أبي

إذا كان تحميل تودو في الخطوة 5 يأخذ 3 ثوان، سيتم تقديم المستخدم مع قائمة تودو فارغة لمدة 3 ثوان قبل يتم عرض المهام الفعلية في الخطوة 6.

إذا كان تودوسكومبوننت يجب أن يكون هتمل التالي في قالبه:

   <ديف * نجيف = "! تودوس. لينغث">ليس لديك حاليا أي تودو حتى الآن.  

ثم المستخدم سوف ترى هذه الرسالة لمدة 3 ثوان قبل يتم عرض ما يجب عمله الفعلية، والتي يمكن أن تضلل المستخدم تماما ويسبب للمستخدم التنقل بعيدا قبل أن تأتي البيانات الفعلية في.

يمكننا إضافة محمل إلى تودوسكومبوننت الذي يظهر الدوار أثناء تحميل البيانات، ولكن في بعض الأحيان قد لا يكون لدينا السيطرة على المكون الفعلي، على سبيل المثال عندما نستخدم مكون طرف ثالث.

لإصلاح هذا السلوك غير المرغوب فيه، نحتاج إلى ما يلي:

  1. جهاز التوجيه الزاوي مباريات تودوس ورل
  2. جهاز التوجيه الزاوي جلب تودو من أبي
  3. جهاز التوجيه الزاوي ينشط تودوسكومبوننت
  4. جهاز التوجيه الزاوي يضع تودوسكومبوننت بجوار <راوتر-أوتليت> في دوم
  5. يتم عرض تودوسكومبوننت في المستعرض مع الواجبات التي تم جلبها من أبي

حيث لا يتم عرض تودوسكومبوننت حتى تتوفر البيانات من الواجهة الخلفية أبي.

هذا هو بالضبط ما يمكن أن يفعله محلل لنا.

للسماح ل أنغلار روتر بحل ما يجب عمله قبل أن ينشط تودوسكومبوننت ، يجب علينا أن نفعل أمرين:

  1. إنشاء تودوسريسولفر الذي جلب تودو من أبي
  2. تيل أنجولار روتر لاستخدام تودوسريسولفر لجلب ما يجب عمله عند تفعيل تودوسكومبوننت في الطريق تودوس

من خلال ربط محلل إلى تودوس الطريق نسأل الموجه الزاوي إلى حل البيانات أولا، قبل يتم تنشيط تودوسكومبوننت .

لذلك دعونا خلق محلل لجلب ما يجب عمله.

إنشاء تودوسريسولفر

الزاوي كلي ليس لديه أمر لإنشاء محلل، لذلك دعونا إنشاء ملف جديد سرك / تودوس. محلل. تيسي يدويا وإضافة الرمز التالي:

   استيراد {إنجكتابل} من '@ أنغلار / كور'؛إيمبورت {أكتيفيدروتيسنافشوت، ريزولف، روترستاتسنافشوت} من '@ أنغلار / روتر'؛استيراد {ملحوظة} من 'ريجس / مرئية'؛استيراد {تودو} من '. /لكى يفعل'؛استيراد {تودوداتاسيرفيس} من '. / ما يجب عمله البيانات. الخدمات'؛Injectable   فئة التصدير تودوسريسولفر تنفذ حل <ملحوظة <تودو [] >> {البناء(خاص تودوداتاسرفيس: تودوداتاسرفيس) {}العزم العام (الطريق: أكتيفيدروتيسنافشوت،ستات: روترستاتسنافشوت): ملحوظة <تودو []> {ارجع هذا. todoDataService. getAllTodos   ؛}}    

نحدد محلل كطبقة التي تنفذ حل واجهة.

واجهة حل اختيارية، ولكن يتيح لدينا إيد تيبسكريبت أو المترجم التأكد من أننا تنفيذ الفئة بشكل صحيح عن طريق مطالبتنا بتنفيذ طريقة حل .

إذا أعادت طريقة حل الوعد أو الموجه الزاوي المرئي انتظار الوعد أو يمكن ملاحظته قبل أن ينشط مكون المسار.

عند الاتصال بالطريقة ديلز ، يمر الموجه الزاوي بشكل ملائم في لقطة المسار المنشطة ولقطات حالة الموجه لتزويدنا بإمكانية الوصول إلى البيانات (مثل معلمات المسار أو معلمات الاستعلام) التي قد نحتاج إليها لحل البيانات.

كود ل تودوسريسولفر مختصر جدا لأن لدينا بالفعل تودوداتاسيرفيس أن يعالج جميع الاتصالات مع الواجهة الخلفية أبي لدينا.

نقوم بحقن تودوداتاسيرفيس في منشئ واستخدام طريقة جيتالتودوس لجلب كل ما يجب عمله في طريقة حل .

ترجع طريقة العزف ملاحظتها من النوع تودو [] ، لذلك فإن الموجه الزاوي ينتظر حتى يمكن ملاحظته قبل تنشيط مكون الطريق.

الآن لدينا لدينا محلل، دعونا تكوين سيمالت الموجه لاستخدامه.

حل تودو عبر الموجه

لجعل سيمالت الموجه استخدام محلل، يجب علينا إرفاقه إلى الطريق في تكوين المسار لدينا.

دعونا فتح سرك / التطبيق التوجيه. وحدة. تيسي وإضافة لدينا تودوسريسولفر إلى تودوس الطريق:

   استيراد {نغمودول} من '@ أنغلار / كور'؛إيمبورت {روترمودول، روتس} فروم '@ أنغلار / روتر'؛استيراد {باجينوتفوندكومبوننت} من '. / وجدت الصفحة لا للوجدت الصفحة لا لل/. مكون'؛استيراد {تودوسكومبوننت} من '. / لجميع الناس / لجميع الناس. مكون'؛استيراد {تودوسريسولفر} من '. / لجميع الناس. محلل '؛كونست روتس: روتس = [{باث: ''،ريديركتوتو: 'تودوس'،باثماتش: 'كامل'}،{باث: 'تودوس'،المكون: تودوسكومبوننت،حل: {تودوس: تودوسريسولفر}}،{باث: '**'،مكون: باجينوتفوندكومبوننت}].NgModule ({الواردات: [روترمودول. forRoot (طرق)]،إكسبورتس: [روترمودول]،مقدمي الخدمات: [TodosResolver]})فئة التصدير أبروتينغمودول {}    

نستورد تودوسريسولفر :

   استيراد {تودوسريسولفر} من '. / لجميع الناس. محلل '؛    

وإضافته كمحلل للطريق تودوس :

   {باث: 'تودوس'،المكون: تودوسكومبوننت،حل: {تودوس: تودوسريسولفر}}    

هذا يحكي الموجه أنغلار لحل البيانات باستخدام تودوسريسولفر وتعيين قيمة العائد محلل كما تودوس في بيانات المسار.

يمكن الوصول إلى بيانات الطريق من أكتيفاتروت أو أكتيفاتروتيسنافشوت ، والتي سنرىها في المقطع التالي.

يمكنك إضافة بيانات ثابتة مباشرة إلى بيانات المسار باستخدام خاصية البيانات للمسار:

   {باث: 'تودوس'،المكون: تودوسكومبوننت،البيانات: {تيتل: 'مثال على بيانات المسار الثابتة'}}    

أو بيانات ديناميكية باستخدام محلل محدد في خاصية حل للمسير:

  : {باث: 'تودوس'،المكون: تودوسكومبوننت،حل: {تودوس: تودوسريسولفر}}    

أو كليهما في نفس الوقت:

  : {باث: 'تودوس'،المكون: تودوسكومبوننت،البيانات: {تيتل: 'مثال على بيانات المسار الثابتة'}حل: {تودوس: تودوسريسولفر}}    

حالما يتم حل المحللين من حل الخاصية، يتم دمج قيمهم مع البيانات الثابتة من البيانات الخاصية وجميع البيانات متوفرة كبيانات المسار. forRoot (طرق)]،إكسبورتس: [روترمودول]،مقدمي الخدمات: [TodosResolver]})فئة التصدير أبروتينغمودول {}

عند التنقل في المتصفح إلى هتب: // لوكالهوست: 4200 ، أنغلار روتر الآن:

  1. يعيد توجيه عنوان ورل من / إلى / تودوس
  2. يرى أن تودوس طريق له تودوسريسولفر المحدد في حل خاصية
  3. على طريقة حل من تودوسريسولفر ، وينتظر النتيجة ويعين النتيجة إلى تودوس في بيانات المسار
  4. ينشط تودوسكومبوننت

إذا قمت بفتح علامة التبويب الشبكة من أدوات المطور الخاص بك، سترى أن يتم تحميل ما يجب عمله الآن مرتين من أبي. مرة واحدة عن طريق التوجيه الزاوي ومرة ​​واحدة من قبل نغونينيت معالج في تودوسكومبوننت .

حتى الزاوي التوجيه يجلب بالفعل تودو من أبي، ولكن تودوسكومبوننت لا يزال يستخدم منطقه الداخلي لتحميل ما يجب عمله.

في المقطع التالي، سوف نقوم بتحديث تودوسكومبوننت لاستخدام البيانات التي تم حلها بواسطة الموجه الزاوي.

باستخدام البيانات التي تم حلها

دعونا فتح التطبيق / سرك / تودوس / تودوس. مكون. تيسي .

يقوم المعالج نغونينيت حاليا بجلب ال تودو مباشرة من أبي:

   عامة نغونينيت    {هذه. todoDataService. getAllTodos   . الاشتراك ((تودوس) => {هذه. تودوس = تودوس؛})؛}    

الآن أن الموجه أنغلار جلب تودو باستخدام تودوسريسولفر ، ونحن نريد لجلب ما يجب عمله في تودوسكومبوننت من بيانات المسار بدلا من أبي.

للوصول إلى بيانات المسار، يجب علينا استيراد أكتيفاتروت من @ الزاوي / الموجه :

   استيراد {أكتيفيدروت} من '@ الزاوي / جهاز التوجيه'؛    

واستخدام حقن التبعية سيمالت للحصول على مقبض من المسار المنشط:

   منشئ (خاص تودوداتاسيرفيس: تودوداتاسيرفيس،مسار خاص: أكتيفيدروت) {}    

وأخيرا، نقوم بتحديث المعالج نغونينيت للحصول على ما يجب عمله من بيانات المسار بدلا من أبي:

   عامة نغونينيت    {هذه. طريق. البيانات. ماب ((داتا) => داتا ['تودوس']). الاشتراك ((تودوس) => {هذه. تودوس = تودوس؛})؛}    

و أكتيفاتروت يعرض بيانات المسار كما يمكن ملاحظتها، لذلك التعليمات البرمجية لدينا بالكاد يتغير.

نستبدل هذا. todoDataService. جيتالتودوس مع هذا. طريق. البيانات. ماب ((داتا) => داتا ['تودوس']) وبقي بقية التعليمات البرمجية دون تغيير.

إذا انتقلت إلى المتصفح الخاص بك إلى لوكالهوست: 4200 وفتح علامة التبويب الشبكة، فلن ترى مرة أخرى اثنين من طلبات هتب جلب ما يجب عمله من أبي.

إنجاز المهمة! لقد نجحت في دمج جهاز التوجيه سيمالت في تطبيقنا!

سيمالت نختتم، دعونا تشغيل لدينا اختبارات الوحدة:

     نغ    

إخفاق وحدة واحدة:

   أعدم 11 من 11 (1 فشل)يجب إنشاء تودوسكومبوننت فشل'التطبيق-تودو قائمة رأس' ليست عنصرا معروف    
تودوسكومبوننت يتم اختبار تودوسكومبوننت
، واختبار لا يعرف من تودوليستهيدركومبوننت ، وبالتالي الزاوي يشكو أنه لا يعرف التطبيق-تودو قائمة رأس جزء.

لإصلاح هذا الخطأ، دعونا فتح التطبيق / سرك / تودوس / تودوس. مكون. المواصفات. تيسي وإضافة NO_ERRORS_SCHEMA إلى تيستبد خيارات:

   بريفيريتش (أسينك (   => {المرحلة التجريبية. configureTestingModule ({الإعلانات: [تودوسكومبوننت]،المخططات: [NO_ERRORS_SCHEMA]}). configureTestingModule ({الإعلانات: [تودوسكومبوننت]،المخططات: [NO_ERRORS_SCHEMA]،مقدمي الخدمات: [TodoDataService،{توفر: أبيسرفيس،وسكلاس: أبيموكسرفيس}]،}). compileComponents   ؛}))؛    

الذي يثير مرة أخرى خطأ آخر:

   أعدم 11 من 11 (1 فشل)يجب إنشاء تودوسكومبوننت فشللا مزود ل أكتيفاتروت !!    

دعونا إضافة مزود واحد أكثر أكتيفاتروت إلى خيارات اختبار:

   بريفيريتش (أسينك (   => {المرحلة التجريبية. configureTestingModule ({الإعلانات: [تودوسكومبوننت]،المخططات: [NO_ERRORS_SCHEMA]،مقدمي الخدمات: [TodoDataService،{توفر: أبيسرفيس،وسكلاس: أبيموكسرفيس}،{توفر: أكتيفيدروت،قيمة الاستخدام: {البيانات: ملحوظة. من({تودوس: []})}}]،}). compileComponents   ؛}))؛    

نقوم بتعيين مقدم الخدمة أكتيفاتروت كائن وهمية يحتوي على خاصية بيانات يمكن ملاحظتها لفضح قيمة اختبار ل تودوس .

الآن اختبارات الوحدة تمر بنجاح:

   أعدم 11 من 11 نجاح    

سيمالت! لنشر التطبيق لدينا في بيئة الإنتاج، يمكننا الآن تشغيل:

     نغ بناء - خارج - البيئة برود    

وتحميل ولدت ديست الدليل إلى خادم استضافة لدينا. كيف حلوة ذلك؟

غطينا الكثير في هذه المقالة، لذلك دعونا نلخص ما تعلمنا.

الملخص

في المادة الأولى، تعلمنا كيف:

  • تهيئة تطبيق تودو باستخدام الزاوي كلي
  • إنشاء تودو فئة لتمثيل الفرد ما يجب عمله
  • إنشاء خدمة تودوداتاسيرفيس لإنشاء وتحديث وإزالة تودو
  • استخدام مكون أبكومبوننت لعرض واجهة المستخدم
  • نشر طلبنا إلى صفحات جيثب

في المقالة الثانية، نحن ريفاكتوريد أبكومبوننت لتفويض معظم عملها إلى:

  • a تودوليستكومبوننت لعرض قائمة تودو
  • a تودوليستيتمكومبوننت لعرض تودو واحد
  • a تودوليستهيدركومبوننت لإنشاء تودو جديد
  • a تودوليستفوتيركومبوننت لإظهار عدد تودو تبقى

في المادة الثالثة، تعلمنا كيف:

  • إنشاء وهمية ريست أبي الخلفية
  • تخزين عنوان ورل أبي كمتغير بيئة
  • إنشاء أبيسرفيس للتواصل مع ريست أبي
  • تحديث تودوداتاسيرفيس لاستخدام الجديد أبيسرفيس
  • تحديث أبكومبوننت للتعامل مع استدعاءات أبي غير المتزامنة
  • إنشاء أبيموكسرفيس لتجنب المكالمات هتب الحقيقية عند تشغيل اختبارات وحدة

في هذه المادة الرابعة تعلمنا:

  • لماذا قد يحتاج التطبيق التوجيه
  • ما هو جهاز التوجيه جافا سكريبت هو
  • ما الزاوي التوجيه، كيف يعمل وماذا يمكن القيام لك
  • كيفية إعداد جهاز التوجيه الزاوي وتكوين الطرق لتطبيقنا
  • كيفية معرفة جهاز التوجيه أنغلار مكان وضع المكونات في دوم
  • كيفية التعامل مع عناوين ورل غير معروفة بأمان
  • كيفية استخدام محلل للسماح أنجولار جهاز التوجيه حل البيانات

كل التعليمات البرمجية من هذه المقالة متاحة في هتبس: // جيثوب. كوم / sitepoint محرري / الزاوي يجب عمله التطبيق / شجرة / الجزء 4.

في الجزء الخامس، ونحن سوف تنفذ المصادقة لمنع الوصول غير المصرح به إلى التطبيق لدينا. كوم / أفاتار / ad9b5970be156b634406cb5c195cb6ec؟ s = 96 & d = مم & r = g "ألت ="مقدمة لتوجيه مكون مع التوجيه الزاويمقدمة لتوجيه المكون مع زوايا روتيرلاتد المواضيع: راو جافا سكريبتفمبتولس & سيمالت "/>

مقابلة المؤلف
جورغن فان دي موير
March 1, 2018