PracticU

Router Outlet

בלי כתוביותעם כתוביות
PracticU › קורס אנגולר 4 עם Angular - WebAPI › Router Outlet
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).

Router Outlet
ההרצאה היא הפרק האחרון בנושא הניתוב המתקדם, ומציגה אפשרויות שלא נלמדו קודם: ניתוב בתוך ניתוב, שני ניתובים באותו דף, וניתוב לפי שם של outlet.
ניתוב בתוך ניתוב
1. מבנה: בתוך קומפוננטה שנטענה על ידי הניתוב הראשי יכול להיות ניתוב פנימי עם router-outlet נוסף.
2. נתיבי ילדים: בהגדרה משתמשים ב-children, וכתובת הילד נכתבת כחלק מכתובת האב. ניתן לקנן כמה רמות, כמו עץ.
שני ניתובים באותו דף
1. outlet נוסף: מוגדר router-outlet עם שם, למשל סרגל צד (sidebar), ובמערך הנתיבים מציינים לאיזה outlet כל קומפוננטה נטענת.
2. דוגמה: כתובת אחת טוענת קומפוננטה ב-outlet הראשי, ובמקביל קומפוננטה נוספת ב-outlet בשם המשני.
3. ניווט: בקוד ניתן לנווט לכמה outlets בבת אחת, והכתובת מופיעה בסוגריים עם שם ה-outlet.
סיכום
בסיום ההרצאה ידוע כיצד ליצור ניתוב בתוך ניתוב, ושני outlets בדף אחד.
השיעור הבא בקורס: Reactive Form

פרקי ההרצאה: Router Outlet

  1. 00:00

    סיכום נקודות קטנות בניתוב מתקדם

  2. 00:35

    ניתוב מקונן בתוך ניתוב

  3. 01:26

    מבנה הניתובים המקוננים באפליקציה

  4. 01:57

    שני ראוטרים בדף אחד עם router-outlet

תמלול ההרצאה: Router Outlet

הטקסט המלא של הדקות הראשונות בהרצאה «Router Outlet» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    שלום לכולם זאת הרצאה אחרונה בראוטינג מתקדם ואנחנו נסגור פה את הפינות הקטנות של מה שלא דיברנו האמת שעברתי על האתר של אנגולר עצמם על כל התיעוד שלהם ועברתי על כל הראוטינג באתר שלהם ולמעשה עשינו הכל ונשאר רק כמה דברים קטנים שאני רוצה להראות לכם ולתת לכם דגשים אז דוגמה ראשונה שאני רוצה להראות לכם זה על ראוטינג בתוך ראוטינג זאת אומרת ניתוב בתוך ניתוב בואו אני אראה לכם אם

  2. 00:31

    אם אנחנו הולכים לרכיב הראשי, וזה דוגמאות שאספתי מאינטרנט מכל מיני אתרים, אנחנו רואים פה שיש לנו בעצם ראוטינג רגיל עם מסגרת ירוקה שטוען שתי קומפוננטות.

  3. 00:42

    שימו לב מה קורה בתוך קומפוננטה השנייה, בפנים יש לנו עוד ראוטינג עם מסגרת אדומה, אז יש לנו בתוך ראוטינג עוד ראוטינג, ושימו לב איך כותבים את ה-child 1 ו-child 2, זה למעשה טעינה של הלינקים כאן, כותבים אותם עם נקודה, למעשה זה מטעין את ה-child 1 ו-2 בתוך ראוטינג הפנימי.

  4. 01:04

    זה ראוטינג בתוך ראוטינג. ומה קורה ב-child 2? ב-child 2, תראו איזה קטע, יש לו עוד ראוטינג בצבע אורנג'.

  5. 01:12

    תראו את זה, child 2 זה ראוטינג בתוך ראוטינג עם צבע אורנג'. אז למעשה יש לי ראוטינג ראשי שהטעין קומפוננטה, בתוכו ראוטינג משני שהטעין קומפוננטה, וראוטינג בפנים שהטעין עוד קומפוננט הזה, כמו בבושקה כזאת.

  6. 01:26

    אתם יכולים לראות שאפשר לנווט כמו בתיקיות תעלה אחד למעלה אחד למטה ותטעין את הנסטד נסטד זה אחד בפנים בקיצור אין שום בעיה ממש לעשות ראוטינג בתוך ראוטינג וזה מה שרציתי לספר לכם שבתוך רכיב יכול להיות ראוטינג פנימי בואו נראה איך נראה האפ ראוץ שלהם אתם רואים פה יש רכיב לדוגמה קומפוננט 2 ויש לו children ניתובי משנה ובפנים יש לו עוד ניתובי משנה

  7. 01:27

    אז ניתוב בתוך ניתוב בתוך ניתוב אפשר גם היה לעשות את זה בלי צ'ילדרינים אבל זה לא משנה, העיקר שאני רציתי להראות לכם שאפשר לשים אחד בתוך השני, אוקיי?

  8. 02:03

    דוגמה הבאה שרציתי להסביר לכם זה איך לעשות שני ראוטינגים באותו דף, לא אחד בתוך השני, הם באותו דף. שימו לב, יש פה ראוטינג לכאן, למסגרת הירוקה, סוליד גרין, ויש עוד ראוטינג בתוך מסגרת הכחולה.

  9. 02:18

    עכשיו, איך הוא ידע לאן להתאים את הקומפוננטות? לראוטינג השני יש לו שם, לדוגמה סייד בר, מפריט צד אז אני יכול להגיד לקומפוננטה אחת שתיכנס לכאן ולקומפוננטה שנייה שתיכנס למקום אחר שימו לב איך כותבים את זה אני יכול להגיד תסתכלו קומפוננטה אאוקס מיין ניתוב רגיל אני יכול להגיד לתוך סייד בר תינתב לי את הקומפוננטה הזאת שימו לב עוד פעם אאוקס מיין

לקורס המלא: קורס אנגולר 4 אונליין עם WebAPI

ההרצאה הקודמת: Advanced Routing - Paging

ההרצאה הבאה: Reactive Form

הרצאות קשורות מקורסים אחרים

  • הגדרת Router ID
  • הגדרת שרת 2008 כ-Router
  • פרוטוקול OSPF - הסבר Router ID

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React