[MUSIC]
دعونا نبدأ الآن الحديث عن التوجيه الزاوي.
هل هو التوجيه أم أنه تأصيل؟
أنا ذاهب إلى أن تأصيل للتوجيه.
لذلك من الآن فصاعدا، سوف نطق كل هذه كما التوجيه،
والطرق، وجهاز التوجيه وهلم جرا.
إذا حدث أنك من منطقة تنطقها باللغة الإنجليزية كطريق أو
جهاز توجيه، يرجى تحمل معي.
لذا، ما هو بالضبط التوجيه الزاوي وكيف يساعدنا؟
من حيث التطبيق الزاوي الذي رأيناه حتى
الآن، لم نر أبدا استخدام للتوجيه.
لقد رأينا أنه يمكننا تطوير تطبيق زاوي مع
مكونات متعددة ومن ثم الاستفادة منها داخل الآخر،
وتطوير تطبيق Angular كامل دون حتى الحديث عن التوجيه.
الآن افترض أن لديك مكونات متعددة
وتريد أن تكون قادرًا على التنقل بين المكونات
بطريقة يمكن أن تتسبب في هذا التنقل من خلال، على سبيل
المثال، النقر على الروابط أو الأزرار في واجهة المستخدم الخاصة بك
وتكون قادرًا على عرض طرق عرض مختلفة في شاشة التطبيق الخاص بك،
ثم التوجيه الزاوي يأتي لانقاذك.
سنرى كيف يمكننا استخدام التوجيه لتطوير شيء يسمى
تطبيقات صفحة واحدة.
سنتحدث عن تطبيقات صفحة واحدة في الدرس التالي.
ولكن في الوقت الحالي، دعونا نركز على التوجيه الزاوي
وتحديدًا الطريق وحدة نمطية متوفرة في Angular.
وحدة جهاز التوجيه نفسها منفصلة عن وحدة Angular الأساسية، لذلك
فهي متوفرة كوحدة منفصلة وستحتاج إلى استيرادها بشكل صريح
إلى تطبيق Angular الخاص بك من أجل الاستفادة من
نموذج Angular Router المدعوم يوفر لك التنقل بين
وجهات نظر نصف القطر خارج مكونات نصف القطر التي تشكل جزءًا من الافتراس الزاوي الخاص بك.
لذلك كجزء من التمرين، سنضيف مكونات متعددة
وسنرى كيف يمكننا التنقل فيما بينها باستخدام جهاز التوجيه الزاوي.
لذلك كما ذكرت بالفعل جهاز التوجيه Angular
يتيح التنقل بين وجهات النظر المختلفة.
وبهذه الطريقة يمكنك تضمين هذا التنقل في
الروابط أو الأزرار المستندة إلى شريط الأدوات
وهكذا يمكنك تضمينها في واجهة المستخدم الخاصة بتطبيق Angular الخاص بك ومن
ثم يمكنك تشغيل التنقل من عرض واحد إلى عرض آخر
عن طريق النقر على إما الرابط أو الزر في واجهة المستخدم.
هذا هو المكان الذي يستفيد فيه جهاز التوجيه Angular من عنوان URL للمتصفح
ويستخدم عنوان URL للمتصفح كتعليمات
للتنقل بين طرق العرض التي تم إنشاؤها بواسطة عميل دائرة نصف قطرها.
يتم دعم جميع طرق العرض هذه عادةً من خلال المكونات المتعددة
التي تشكل صعبًا من تطبيق Angular الخاص بك.
الآن عند التنقل من طريقة عرض إلى طريقة عرض أخرى،
يمكنك أيضًا تمرير معلمات اختيارية إلى طرق العرض هذه.
كما تعلمنا في تلك الشريحة السابقة،
يستفيد جهاز التوجيه الزاوي من عنوان URL
لتمكينه من التعرف على الحاجة إلى التنقل بين الوسط.
لذا، هذا هو المكان الذي يستفيد فيه جهاز التوجيه Angular من ما
هو مدعوم بالفعل في HTML5 من خلال واجهة برمجة تطبيقات التاريخ؟
إذن، ماذا تمكننا واجهة برمجة تطبيقات التاريخ من القيام به؟
يعطي المطورين القدرة على تعديل
عنوان URL لموقع الويب دون التسبب في تحديث الصفحة.
الآن إذا كنت معتادًا على زيارة مواقع ويب مختلفة في متصفحك،
فستنقر عادةً على شريط الإشارات المرجعية أو
على رابط في صفحة أو ستكتب
عنوان URL بشكل صريح في شريط العناوين في متصفحك.
الآن عندما تفعل ذلك، فأنت تحدد بوضوح عنوان URL هناك.
الآن عند تحديد عنوان URL،
فإنك تقوم بتشغيل متصفحك للانتقال تلقائيًا إلى الخادم
وجلب تلك الصفحة الجديدة وعرض الصفحة في نافذة المتصفح.
الآن إذا كان بإمكانه منع هذه الحاجة للذهاب إلى الخادم وجلب المعلومات، ولكن
بدلاً من ذلك تغيير عنوان URL دون التسبب في تحديث هذه الصفحة،
فيمكننا الاستفادة من ذلك لتمكيننا من التنقل
بين المشاهدات التي تشكل جزءًا من تطبيق واحد
وهذا هو المكان الذي نأخذ فيه الاستفادة من HTML5.
واجهة برمجة تطبيقات التاريخ التي تدعم أساليب مثل PushState و replacestate.
لذلك، يسمح لك PushState بإضافة إدخال سجل في
سجل المتصفح الخاص بك دون التسبب في تحديث الصفحة بالفعل.
وبالمثل، سيقوم ReplaceState بتعديل
إدخال السجل الحالي في سجل متصفحك.
لذلك، يمكنك حتى استخدام
الزر الخلفي والأمام من المتصفح الخاص بك لتكون قادرة على التحرك
ذهابا وإيابا بين عناوين URL دون التسبب في تحديث الصفحة.
الآن، هذا هو المكان الذي تحتاج فيه إلى تحديد شيء داخل
صفحة HTML الخاصة بالفهرس تسمى القاعدة.
لذلك عندما تستخدم واجهة برمجة تطبيقات محفوظات HTML هذه الطرق،
ثم للتعديل، تحتاج إلى تحديد
موقع أساسي من حيث تحدد الأجزاء الإضافية
من مسار عنوان URL الخاص بك والتي لن تؤدي إلى تحديث الصفحة.
حتى في هذه الحالة، لتطبيق الزاوي لدينا،
وهذا يبدأ دائما في الجذر.
لذلك، لهذا السبب نحدد القاعدة كـ href =»/».
سيتم
التعامل مع كل شيء آخر يأتي بعد ذلك في عنوان URL داخل تطبيق Angular الخاص بك كشيء
يؤدي إلى التنقل الذي يتم التعامل مع جهاز التوجيه Angular نفسه
دون التسبب في حاجة متصفحك إلى تحديث من خادم.
لذا، هذه هي الطريقة التي يستفيد بها جهاز التوجيه الزاوي من واجهة برمجة تطبيقات التاريخ HTML5.
الآن إذا لم يكن لديك واجهة برمجة تطبيقات التاريخ،
فإن الطريقة الأخرى للقيام بالتنقل هي باستخدام علامات التصنيف.
أنت تعرف بالفعل أنه في HTML، إذا قمت بتحديد أي
رابط يبدأ بوسم، فهذا يشير إلى رابط داخل نفس الصفحة.
لذلك عند النقر على مثل هذه الروابط، فإنه لن يسبب تحديث الصفحة.
بدلاً من ذلك، سيعيد توجيهك إلى موقع آخر داخل نفس الصفحة.
لذلك، هذه طريقة أخرى للقيام بالأشياء.
ولكن بالنسبة للعرض النظيف، تدعم واجهة برمجة تطبيقات HTML5
واجهة برمجة تطبيقات التاريخ هذه التي تمكنك من التعامل مع سجل
المتصفح الخاص بك دون التسبب في تحديث الصفحة.
بعد هذا التفسير الطويل،
دعونا نأخذ مثالا لمساعدتنا على فهم هذا أبعد من ذلك.
لنفترض أنك تحدد عنوان URL الخاص بك مثل هذا القول، على سبيل المثال، example.abc.com/home.
الآن مع واجهة برمجة تطبيقات تاريخ HTML5،
يمكنك ببساطة أخذ الجزء الأخير من عنوان URL
وتعديله إلى عنوان URL آخر كما كنت قد أظهرت هنا مع example.abc.com/menu.
لذلك ترى أنه تم تغيير عنوان URL الآن من شرطة مائلة إلى قائمة شرطة مائلة،
يمكن تشغيل هذا التغيير باستخدام طريقة حالة دفع
لواجهة برمجة تطبيقات محفوظات HTML5 بدون كما ذكرت، دون إعادة تحميل الصفحة.
بدلاً من ذلك، سيكون هذا بمثابة مشغل داخلي
للملاحة يستفيد منه جهاز التوجيه Angular بشكل صريح
لدعم التنقل بين طرق العرض المختلفة لتطبيق Angular الخاص بك.
الآن من الواضح أنك يجب أن تكون مهتمًا بكيفية استفادة جهاز التوجيه الزاوي
من هذا.
لذلك هذا هو المكان الذي يقوم فيه جهاز التوجيه Angular بالاستفادة
من معالجة السجل لتعديل عنوان URL الخاص بالمتصفح دون تشغيل تحديث الصفحة.
دعونا نأخذ مثالا على ذلك.
لنفترض أن لديك تطبيق Angular الخاص بك مقيم في عنوان URL الخاص هذا.
الآن، يحدث ذلك أن يتم تقديم تطبيق Angular الذي تعمل عليه
إلى المتصفح عن طريق الوصول إليه على عنوان URL المحدد هذا.
لذلك، فإنه سوف يساعدنا على فهم بسرعة ما يتيح لنا راوتر الزاوي القيام به.
لذلك في هذه الحالة، عند كتابة هذا في عنوان URL للمتصفح الخاص بك،
يمكنك بسهولة تكوين Angular Router لإعادة توجيهك
إلى موقع افتراضي داخل التطبيق الزاوي الخاص بك.
عادة، ذكرني أن شيئا مثل المنزل.
بحيث يأخذك ذلك إلى نقطة الدخول الافتراضية
للتطبيق الزاوي الخاص بك والتي
من أجل فهم سهل، وسوف أسميها ك/home.
لذلك إذا كان عنوان URL الخاص بك يحتوي على المضيف المحلي: 4200/home،
فهذا يعني أنك في موقع منزلك الافتراضي.
الآن عندما يتم تشغيل هذا التنقل،
يمكنك بعد ذلك السماح لجهاز التوجيه الزاوي الخاص بك يأخذك تلقائيًا إلى العرض،
على سبيل المثال، الذي يدعمه هذا المكون الرئيسي.
لذلك عندما يصبح عنوان URL مضيف محلي: 4200/home،
ستقوم تلقائيًا بعرض عرض المكون الرئيسي في شاشة المتصفح.
بالضبط جدا عند وضع وجهة النظر التي سننظر في الشريحة التالية
وفي التمرين الذي يلي ذلك.
وبالمثل، يمكنك الحصول على طرق عرض أخرى داخل
تطبيق Angular الخاص بك والتي يمكن أيضًا دعمها من خلال عناوين URL الأخرى
التي هي ملحقات للمضيف المحلي: 4200.
على سبيل المثال، إذا كان عنوان URL هو localhost:4200/aboutus،
فقد يؤدي ذلك إلى عرض العرض الذي يتم تقديمه بواسطة AboutComponent.
وبالمثل، فإن القائمة تظهر لك مينوكومبوننت وهلم جرا.
لذلك ما يمكننا من القيام به هو،
اعتمادا على ما عنوان URL المستخدم في المتصفح الخاص
بك، سوف تستخدم ذلك للتنقل تلقائيا بين
وجهات النظر المختلفة من المكونات المختلفة لتطبيق Angular الخاص بك.
الآن، ليس عليك أن تقلق بشكل صريح حول هذا الموضوع.
إذا قمت بتكوين جهاز التوجيه الزاوي لرعاية كل هذا، فإن جهاز التوجيه
سوف يعتني تلقائيا بتوفير التنقل بين هذه
المكونات كما سنرى في التمرين الذي يتبع هذه المحاضرة بالذات.
الآن قبل أن ننتقل إلى التمرين حيث سنتعرف على المزيد عن
جهاز التوجيه الزاوي، اسمحوا لي
أن ألفت انتباهكم بسرعة إلى بعض المصطلحات داخل جهاز التوجيه الزاوي الذي ستواجهه أثناء التمرين،
وأود أن تولي اهتماما خاصا لهذه الشروط،
لأنها حاسمة لفهم كيفية عمل جهاز التوجيه الزاوي بالفعل.
لذلك سترى أولاً أنه عندما نقوم بتصميم جهاز التوجيه الزاوي،
سنأخذ هذه المساعدة من وحدة جهاز التوجيه التي
تشكل جزءًا من مكتبة جهاز التوجيه المائل الزاوية.
لذلك، ونحن في طريقنا لاستيراد وحدة جهاز التوجيه إلى أو تطبيق الزاوي
في وحدة التطبيق وبعد ذلك أيضا سنقوم باستيراد الطرق.
لذلك، تسمح لنا الطرق بتحديد المسارات المختلفة التي يستخدمها
تطبيقنا Angular أو يستخدم جهاز التوجيه الزاوي.
لذلك في هذه الحالة، سنقوم بتحديد الطرق في شكل مسار
والمكون المقابل.
لذلك كما رأيت في الشريحة السابقة، رأيت أنه
تم تعيين كل واحد من ملحقات عنوان URL هذه إلى عرض مكون معين.
لذلك، يتم توفير هذا النوع من المعلومات لهذا الموجه الزاوي
من خلال المسارات ويتم تحديد جميع هذه المسارات باستخدام
كائن جافا سكريبت مثل هذا المسار مع اثنين من الخصائص.
المسار والمكون وبعض الخصائص الإضافية التي لن
نواجهها الآن، ولكننا سنرى في بعض التدريبات اللاحقة.
أيضا، السؤال الثاني الذي تتساءل هو أين سيتم عرض هذا
الرأي في تطبيق Angular الخاص بك؟
هذا هو المكان الذي في قالب لدينا من مكون التطبيق لدينا،
وسوف نقوم بتضمين توجيه يسمى RouterOutlet الذي تم تحديده
كما ترى و .
سيتم تضمين هذا في ملف قالب مكون التطبيق،
والآن ينتقل جهاز التوجيه الزاوي إلى
وجهات النظر المختلفة للمكونات المختلفة.
سيتم تضمين العرض المقابل للمكون في
طريقة عرض التطبيقات الخاصة بك أينما قمت بتحديد منفذ جهاز التوجيه هذا.
لذلك، احترس من ذلك في التمرين الذي يلي.
بالإضافة إلى ذلك، لتشغيل التنقل، سترى أنه
مع العديد من العلامات التي يتم استخدامها داخل التطبيق.
على سبيل المثال، أود أن تشمل إعداد علامات مع
زر MD مكون المادة الزاوي في شريط الأدوات،
في مكون رأس تطبيق Angular الخاص بنا.
أود إقران العلامات بتوجيه آخر،
وهو توجيه سمة يسمى RouterLink.
يعد RouterLink توجيهًا فعليًا توفره لنا وحدة جهاز التوجيه.
هذا الرابط جهاز التوجيه تمكننا من تحديد المسار مثل، على سبيل المثال،
رموز مكتوبة، أستطيع أن أرى «/القائمة».
يمكنك الحصول على تفاصيل أكثر من هذا لجهاز التوجيه (routerLink).
ولكن بالنسبة لهذه العملية، سنبدأ مع مثال بسيط حيث سيكون لدينا، على
سبيل المثال، /القائمة المائلة الرئيسية شرطة مائلة الاتصال بنا وهلم
جرا المحدد باستخدام السمة RouterLink مباشرة.
لذلك عند النقر على رابط مثل هذا في شريط الأدوات الخاص بك،
فإن ذلك سيؤدي إلى تشغيل جهاز التوجيه Angular لتسبب تغيير أو
تنقل إلى طريقة عرض معينة تدعمها وحدة Angular Router.
لذلك، يتم تحديد التعيين بين هذا الرابط والمكونات المقابلة
بالفعل في المسار الذي نعطيه لتطبيق Angular الخاص بنا.
لذلك، احترس من كل هذه الأشياء كما تفعل التمرين.
سأشرح بعض هذه الأشياء وسبب
القيام بها أثناء قيامنا بخطوات التمرين التي تتبع هذا الدرس.
[ موسيقى]