[MUSIC]
في هذا التمرين سوف ننظر في كيفية الاستفادة من
وحدة التوجيه Angular لتكون قادرة على دعم مكونات متعددة،
وتكون قادرة على الانتقال إلى أي واحد من هذه المكونات في تطبيق Angular الخاص بنا.
إلقاء نظرة سريعة على حالة طلبنا.
في نهاية التمرين الأخير،
لاحظنا بالفعل أنه في هذا التطبيق، في الرأس،
لدينا روابط إلى أربعة اقتباس مختلفة، صفحات إلغاء الاقتباس هنا.
الآن في المصطلحات الزاوي، سيتم دعم هذا باستخدام
مكونات مختلفة، كما سنرى في هذا التمرين.
لذلك نرى هنا أنه عندما نضغط على الصفحة الرئيسية،
نريد أن نكون قادرين على رؤية تفاصيل ما يجب أن يكون موجودًا في الصفحة الرئيسية.
وبالمثل، حول والقائمة بالطبع كنت ترى بالفعل هناك الحق،
ومن ثم الاتصال، وربما يعرض بعض المعلومات حول محتوى
هذا المطعم بالذات.
إذن كيف يذهبون لدعم شيء كهذا؟
أولا، من خلال إلقاء نظرة سريعة واحدة على ذلك نرى أن القائمة
مدعومة بالفعل من خلال عرض المعلومات حول القائمة هنا،
وهذا هو بالفعل تسهيل مع استخدام مكون القائمة.
لذلك نرى أن مكون القائمة هو جنبا إلى جنب بين رأس
وتذييل الصفحة وقادرة على عرض المعلومات هناك حق.
الآن، كيف يمكننا الاستفادة من استخدام وحدة التوجيه Angular
لتمكيننا من دعم هذه المكونات المتعددة والقدرة على التنقل فيما بينها.
الآن، للبدء، أولا، بالطبع، نحن بحاجة إلى مكونات متعددة،
كل واحد منهم يظهر وجهة نظرهم الخاصة حتى نتمكن من التنقل بين وجهات النظر.
لذلك دعونا إضافة في ثلاثة مكونات أخرى إلى التطبيق الزاوي لدينا
، المنزل، حول والاتصال.
أنت تعرف بالفعل كيف تفعل ذلك، لذلك دعونا نذهب إلى تلك الخطوة التالية.
في موجه، اكتب ng g g مكون
المنزل لإنشاء المكون الرئيسي.
وبالمثل توليد
عنصر حول
وأيضا بينما نحن في ذلك
عنصر الاتصال.
حتى الآن لدينا ثلاثة مكونات تضاف جنبا إلى جنب مع المكون الجديد الذي
لدينا بالفعل.
يتم استخدام مكون تفاصيل القرص بالفعل في مكونات القائمة حتى
لا نعتبره في الوقت الحالي.
ولكن لدينا الآن المنزل، حول، الاتصال ومكونات القائمة،
ونحن بحاجة إلى وسيلة للذهاب بينهما.
إذاً كيف يمكننا فعل ذلك؟
لذلك هذا هو المكان الذي يمكنني الاستفادة من وحدة التوجيه الزاوي.
للبدء في استخدام وحدة جهاز التوجيه لتمكيننا من التنقل
بين هذه المكونات، دعنا نضيف وحدة Angular جديدة.
الآن هذا النمط من استخدام وحدة التوجيه هو شيء يقترح
لتطبيقات الزاوي أكثر تعقيدا قليلا، ولكن
إذا جعلنا ذلك كممارسة قياسية، فإنه يقطع شوطا طويلا لمساعدتنا في المستقبل.
لذلك أنا بدأت حتى تطبيق بسيط مع
وضع وحدة التوجيه في وحدة منفصلة خاصة بها.
بحيث يشمل جميع احتياجات التوجيه لدينا في وحدة منفصلة.
للبدء، نستخدم مرة أخرى CLI Angular
لإنشاء وحدة نمطية أخرى، وسنسمي هذه الوحدة كتوجيه للتطبيق.
لذلك فإن وحدة توجيه التطبيق هذه التي سنقوم بإنشائها سوف تستفيد من
وحدة تعيين فترات زمنية محددة الزاوي لتوفير ميزات التوجيه لتطبيقنا.
ثم نذهب للاستفادة من ذلك في وحدة التطبيق لدينا لتمكين التوجيه.
لإنشاء وحدة نمطية جديدة تسمى توجيه التطبيق،
في موجه نوع ng g g وحدة توجيه التطبيق،
والتي يجب أن تنشئ وحدة توجيه التطبيق
ووضع ملف app-routing.module.ts في هذا المجلد المحدد هناك.
الآن يتم ترك وحدة توجيه التطبيق هذه هناك فقط.
نحن بحاجة إلى تضمين ذلك صراحة في وحدة التطبيق لدينا،
لذلك يجب أن تكون قادرة على الاستفادة منه.
الذهاب إلى المحرر نرى الآن أن لدينا الآن مجلد آخر هنا
يسمى التطبيق التوجيه وداخل أن لدينا أبروتينغمودول هنا،
نختار وحدة الزاوي العامة التي ولدت كلي الزاوي بالنسبة لنا.
هذا ليس له شيء محدد حول التوجيه على هذا النحو
في الوقت الحالي، لكننا سنضيف تلك الميزات هناك.
ولكن، قبل أن نفعل ذلك، دعونا نستخدم هذا ApproutingModule في app.module لدينا،
وحدة الجذر لتطبيق الزاوي لدينا.
للقيام بذلك، افتح app.module،
وبينما نحن هنا، دعني أفعل القليل من التنظيف هنا.
أنا أميل إلى عدم مثل التعليمات البرمجية غير المنظمة، لذلك
أنا فقط ذاهب لنقل كل هذا الرمز
للمكونات معا في مكان واحد هناك ومن
ثم لدي الخدمات المطلوبة أسفل هنا.
الآن لدينا وحدة جديدة التي نحصل
عليها من أبروتينغمودول،
والتي أنشأناها للتو
وبعد ذلك أنا ذاهب إلى تتطلب أن
أبروتينغمودول في بلدي،
وحدة الطريق أو أبمودول هنا.
لذلك، أقوم بتضمين ApproutingModule عن طريق استيراده أولاً هناك.
ثم بعد ذلك، في الواردات، أذهب في
ثم أضيف في أبروتينغمودول.
هناك حق، أبروتينغمودول.
لذلك مع هذا،
يتم إصلاح وحدة التطبيق الخاصة بي، وحدة الجذر، الآن حتى للاستفادة من أبروتينغمودول.
الآن هذا يعطيني حرية تطوير جزء التوجيه الخاص بي في
بلدي ApproutingModule بثقة كاملة أنه سيتم استخدامه من قبل وحدة التطبيق الخاصة بي.
لذلك دعونا حفظ التغييرات على وحدة التطبيق،
وبعد ذلك سوف نعود وفتح أبروتينمودول هنا.
وهنا نحن ذاهبون للاستفادة من
وحدة جهاز التوجيه التي Angular يوفر لنا.
لذلك اسمحوا لي هنا استيراد،
RouterModule هنا، وأيضا
وحدة المسارات المصاحبة المتوفرة من Angular.
ثم سأقوم باستيراد ذلك من Angular،
ومن ثم، RouterModule هنا.
لذلك من مكتبة جهاز التوجيه الزاوي، أقوم باستيراد كل من
RouterModule ووحدة المسارات.
لذلك بمجرد أن أفعل ذلك، من الواضح أنني بحاجة إلى أن تكون قادرة على تضمين RouterModule هنا.
لذلك بالإضافة إلى CommonModule التي قمت باستيرادها هناك،
أحتاج أيضًا إلى استخدام RouterModule هنا.
الآن، سأتركه عند هذه النقطة
سنقوم بتطوير الطرق لتطبيق Angular الخاص بنا
ثم نعود وإصلاح هذا الأمر بعد ذلك بقليل.
لذلك مع هذا، اسمحوا لي حفظ التغييرات على وحدة توجيه التطبيق.
وما سأقوم به هو، فقط من أجل الحفاظ على شفرتي نظيفة
ومنظمة، سأقوم بتحديد جميع الطرق لتطبيقي في ملف آخر.
ولكن سأقوم بإنشاء في مجلد توجيه التطبيق
ثم سأقوم بتسميته على أنه routes.ts5.
الآن، داخل هذا الملف، سأقوم بإنشاء جميع الطرق التي أحتاجها.
حتى هنا، أنا ذاهب لاستيراد،
مسارات من، @angular /router،
ومن ثم استخدام ذلك لبناء مسارات لتطبيقي.
الآن بالإضافة إلى ذلك، أحتاج إلى أن أتمكن من استيراد جميع
المكونات التي لدي داخل طلبي.
لأنني أريد أن أكون قادرًا على التنقل إلى جميع المكونات.
إذن أين لدي قائمة بجميع المكونات؟
لدي لهم في app_module.
لذلك اسمحوا لي أن أذهب إلى app_module.
أحاول عدم كتابة الأشياء إلى أقصى حد ممكن لإبقاء الأمور تحت السيطرة.
لذلك سأذهب إلى app_module، ثم أقوم بنسخ جميع المكونات التي لدي.
لا أحتاج إلى AppComponent لأنني لن أتنقل مباشرة إلى ذلك في
طلبي، ولكن ما تبقى منها سأحتاج إليها.
لذلك سأقوم ببساطة بنسخ كل تلك
ثم تضمينها في ملف المسارات الخاص بي، هنا.
حتى الآن لدي مينوكومبوننت، ديشديتيل، رأس، القدم.
في الواقع، أنا لست بحاجة إلى رأس و فوتركومبوننت إما.
لن أحتاج إلى رأس و
فوتركومبوننت لأنني لن انتقل إليها باستخدام الطرق.
لذلك اسمحوا لي حذف رأس ومكونات تذييل الصفحة.
أنا فقط بحاجة إلى القائمة، الصفحة الرئيسية، حول، جهات الاتصال.
أنا شملت Dishdetail، وسوف نأتي إلى ذلك في واحدة من التدريبات في وقت لاحق.
حتى الآن بعد أن قمنا بتضمين كل هذه، الخطوة التالية هي بالنسبة
لي لتحديد مختلف الطرق المتاحة هنا.
سأحدد ثابتًا هنا
مسارات مسماة من نوع المسارات.
حتى الآن ترى لماذا لدي طرق مهمة من جهاز التوجيه Angular هناك.
لذلك سيسمح لي هذا بتعريف مصفوفة تحدد
المسارات المختلفة التي هي جزء من طلبي.
هنا، اسمحوا لي أن حدد جميع الطرق هنا.
الآن عند تحديد المسارات في
تطبيق Angular الخاص بك، ستقوم بتحديد المسار.
والتي سأبدأ بها مع HomeComponent،
وبعد ذلك عندما انتقل إلى مسار المنزل،
المكون المقابل هو HomeComponent.
لذلك عندما يتضمن عنوان URL الخاص بي المنزل،
فسوف أتنقل إلى HomeComponent.
في المحاضرة السابقة، رأينا بالفعل كيف نستخدم HTML
PushState () للتعرف على
الملاحة الداخلية، وذلك باستخدام دعم HTML لـ PushState ().
لذلك هذا هو ما أستفيد منه هنا من أجل تحديد هذه الطرق المختلفة هنا.
لذلك عندما أقول لوكالهوست: 4200/المنزل،
ثم هذا يشير إلى هوميكومبوننت، هنا.
إذن هذه هي الطريقة التي سأنتقل بها إلى حفل العودة للوطن
وبالمثل، يمكننا تحديد المكونات الأخرى في تطبيقنا.
المسار التالي الذي سأقوم بتحديده هو MenuComponent.
لهذا التمرين، أنا ذاهب فقط لتحديد هذين فقط.
وسيتم ملء بقية منها كجزء
من بعض التدريبات والمهام اللاحقة التي تلي ذلك.
لذلك لدينا اثنين منهم إعداد, الصفحة الرئيسية والقائمة.
الآن، يجب أن أقدم أيضًا المسار الافتراضي هنا.
لذلك عندما ينتقل المستخدم إلى المضيف المحلي: 4200،
ثم سوف ينتهي بك الأمر في الموقع الافتراضي.
لذلك في هذه الحالة، سأقوم ببساطة بإعادة توجيه المستخدم إلى HomeComponent،
وهو ما سيتم عرضه في تطبيق Angular.
لذلك للقيام بذلك، سأكتب في خاصية RedirectTo.
ثم حدد ذلك ليكون /المنزل.
وهذا يعني أنه عند التنقل دون توفير مسار عنوان URL هناك،
فإنك ستنتقل تلقائيًا إلى HomeComponent،
ويجب أن يتطابق هذا بالكامل هنا.
لذلك هؤلاء الثلاثة، سوف أقوم بتوريد الطرق هنا، في الوقت الحالي.
أما الباقية،
كما قلت، فستضاف كجزء من بقية التدريبات.
الآن، من الواضح أنك ترى هذه
الخطوط الحمراء المتعرجة هناك لأن هذه كلها في
../لذا دعني أصلحها.
حتى الآن، من ملف routes.ts،
ونحن نستعد هذه المسارات ثابتة هنا ومن
ثم جعلها متاحة.
حتى الآن أن هذا جاهز بالنسبة لنا، وسوف نعود إلى التطبيق routing.module.
وفي التطبيق routing.module،
سأقوم باستيراد المسارات الثابتة،
المسارات الثابتة.
إذا كنت تريد أن تقول أنه كمسارات، والثوابت المسارات، واستخدامها هنا.
الآن، كيف يمكنني الاستفادة منه هنا؟
الآن، يأخذ RouterModule
كمعلمة لـ ForRoot،
المعلمة هي تكوين المسارات.
لذلك أنا ذاهب لتزويد الطرق كمعلمة لذلك، RouterModule.
حسنا، حتى أن إصلاح تكوين التوجيه لدينا لتطبيقنا.
أحد التغييرات النهائية التي نحتاج إلى إصلاحها هو أنه من التطبيق routing.module،
نريد أن نكون قادرين على تصدير RouterModule إلى وحدة التطبيق الخاصة بنا
بحيث يمكن أيضًا الاستفادة منه.
لذلك هذا هو المكان الذي نستخدم فيه
خاصية التصدير في ديكور ngModule الخاص بنا.
وجعل لدينا راوترمودول متاحة لأبمودول.
لذلك دعونا حفظ التغييرات أيضا حتى الآن.
الآن، عند التوجيه إلى أحد هذه الأجزاء،
أيا كان عرض العرض لمكون معين.
ليس لدينا أي شيء في الوقت الحالي في طلبنا.
عندما تنظر إلى الملف AppComponent.html.
هنا، افتراضيا لدينا فقط رأس التطبيق، القائمة التطبيق،
وتذييل التطبيق هنا.
الآن لحسن الحظ،
يوفر لنا RouterModule الزاوي
توجيهًا يسمى مخرج جهاز التوجيه.
لذلك كلما قمت بتحديد هذا التوجيه كما,
العلامة في ملف القالب الخاص بك.
ثم سيستخدم تطبيق Angular الخاص بك تلقائيًا
ذلك كمكان يجب فيه إدخال العرض المقابل.
لذلك، من خلال تحديد منفذ التوجيه في ملف قالب AppComponent الخاص بي.
الآن سوف أكون قادرا على عرض أي من هذه المعلومات في ذلك الموقع المحدد.
لذلك قمنا بإجراء تغييرات على وحدة توجيه التطبيق،
ملف AppComponent.html، حيث أضفنا منفذ التوجيه.
قمنا بتعريف المسارات في ملف Routes.ts
ثم لدينا AppModule حيث أضفنا في ApproutingModule
كواحدة من الواردات هناك، بعد استيراده هنا.
لذا بعد كل هذه التغييرات، دعنا نذهب
ونلقي نظرة على ما تظهر تطبيقاتنا Angular في المتصفح.
الذهاب إلى متصفحنا، يمكننا الآن أن نرى أنه في
متصفحنا الشيء الافتراضي الذي تم عرضه هنا هو الأعمال المنزلية.
من معرفتك بكيفية عمل المكون الذي يتم إنشاؤه بواسطة Angular CLI.
يمكنك بالفعل التعرف على أن هذا يجب أن يكون في قالب المكون الرئيسي.
أيضا، نلقي نظرة على عنوان URL في جزء العنوان من المتصفح.
ترى أنه يقول المضيف المحلي: 4200/المنزل.
إذا قمت ببساطة بكتابة المضيف المحلي: 4200،
سيؤدي ذلك تلقائيًا إلى إعادة توجيه نفسه إلى المضيف المحلي: 4200/home.
لأننا إعداد هذا المسار معين في تكوين المسارات لدينا هنا.
الآن ليس لدينا طريقة للذهاب إلى الوحدات المتبقية،
فكيف يمكننا توفير الربط حتى نتمكن من الانتقال إلى الوحدة المتبقية.
لذلك لملء ذلك، نحن بحاجة للذهاب وتكون قادرة على إضافة
معلومات إضافية في ملفات قالب مكونات رأس
بحيث يمكن التنقل بين هذه المكونات المختلفة.
العودة إلى المحرر لدينا، اسمحوا لي أن فتح ملف HeaderComponent.html.
داخل هذا الملف HeaderComponent، نرى أن لدينا هذه الأزرار
هنا التي يجب أن تمكننا من الانتقال إلى تلك المكونات المعينة هناك.
حتى هنا، ونحن نأخذ مساعدة من توجيه سمة أخرى أن
وحدة التوجيه توفر لنا تسمى RouterLink.
لذلك سوف نقوم بتوريد
RouterLink ك/home.
مما يعني أنه بالنسبة لهذا الزر الخاص،
وصلة المنزل في شريط الأدوات لدينا.
عندما نضغط على ذلك، يجب أن يوجهني تلقائيًا إلى المنزل.
بهذه الطريقة، يعرف تطبيق Angular الخاص بي أين يرسلني في هذه المرحلة.
لذلك هذا هو المنزل هناك.
الآن وبالمثل، اسمحوا لي أيضا إضافة واحدة للقائمة هنا.
بالنسبة للقائمة، عند النقر على رابط القائمة هناك،
يجب أن يأخذني إلى مكون القائمة.
لذا فإن توجيه السمة RouterLink يمكّنني من تحديد، كما ترى
هنا سلسلة حيث يمكنني تحديد المسار الذي يحتاج إلى إضافته.
دعونا حفظ هذه التغييرات أيضا، ومن ثم الآن نلقي نظرة نهائية على طلبنا.
الذهاب إلى تطبيقنا، والآن نرى أن يتم عرض مكون الصفحة الرئيسية هنا.
عندما نضغط على مكون القائمة، نحن في القائمة.
لذا لاحظ كيف انتقل طلبي تلقائيًا
إلى مكون القائمة لإظهار العرض مع القائمة هنا.
وأيضا إلقاء نظرة على شريط العناوين،
لاحظ كيف يظهر شريط العناوين الآن المضيف المحلي: 4200/القائمة.
مرة أخرى، يمكننا الانتقال مرة أخرى إلى المكون الرئيسي وإلى مكون القائمة،
ذهابا وإيابا.
لذلك هذا يدل على كيفية إضافة هذا التوجيه إلى التطبيق لدينا،
ونحن قادرون على التنقل وإظهار وجهات نظر مختلفة داخل التطبيق لدينا.
الآن، حول والاتصال، ونحن في طريقنا للقيام بذلك كجزء من
تمرين آخر والمهمة التي تليها في وقت لاحق.
هذا يكمل هذا التمرين حيث استخدمنا وحدة التوجيه Angular
ثم قمنا بتكوين تطبيق Angular الخاص بنا لاستخدام مسارات مختلفة
لإظهار طرق العرض المختلفة.
هذا هو الوقت المناسب بالنسبة
لك للقيام جيت الالتزام مع الرسالة أساسيات جهاز التوجيه الزاوي.
[ موسيقى]