ניתוב בתפריט עליון - ROUTING
pathMatch: 'full', שפירושו התאמה מלאה ולא חלקית.product מציג את רשימת המוצרים, ו-about us ו-news מציגים את הרכיבים שלהם.** מפנה כל כתובת שלא קיימת לרשימת המוצרים.href משתמשים ב-routerLink עם מערך שמציין לאן מנווטים. סוגריים מרובעים סביב מאפיינים של אנגולר מבדילים אותם מ-HTML רגיל.router-outlet בקומפוננטה הראשית היא המקום שבו נטען הרכיב של הניתוב. הרכיבים שנטענים דרך הניתוב לא נקראים עוד כתגיות.routerLinkActive מוסיף את הקלאס active ל-li, ולא לקישור עצמו, כדי שהפריט הפעיל יסומן נכון.פרקי ההרצאה: ניתוב בתפריט עליון - ROUTING
תמלול ההרצאה: ניתוב בתפריט עליון - ROUTING
הטקסט המלא של הדקות הראשונות בהרצאה «ניתוב בתפריט עליון - ROUTING» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו נלמד על ראוטינג ונעשה כך שלחיצות על תפריט העליון יטעינו את המודול הנכון ולא כמו שזה עכשיו שכל המודולים טעונים ביחד בו זמנית אנחנו נטעין כל פעם את המודול שצריך לפי הקליקים בתפריט העליון וזה נקרא ראוטינג למעשה אנחנו נעבור בין שלושת העמודים שיהיו לנו
באתר חשוב להדגיש שזה כאילו עמודיים אבל בפועל אנחנו נשארים תמיד על העמוד הראשון שהגיע לאינדקס html ואתם יכולים לראות שאנחנו תמיד תמיד בתוך האינדקס וכל מה שקורה קורה בתוך תגית uproot אבל יש פה אשליה ואפקט של ניתוב בין הדפים וגם הכתובת url שתהיה פה אפשר יהיה לשלוח לחבר והוא ישר ייכנס לעמוד הנכון אז בואו נתחיל לדבר על ראוטינג ועל נושא
של עמודים זה דרך אגב גם היה באנגולר אחד פשוט הכל השתנה מאז. כדי להשתמש ב-Routing אנחנו צריכים לעשות אימפורט לסרוויס של ראוטינג, אבל אני רואה פה שיש לנו מודול מוכן שעשו עבורנו מתכנתים של Angular CLI, נכון? התחלנו עם Angular CLI שהתקנו בהתחלה והם עשו פה מודול שמטפל רק בנושא של ראוטינג ואנחנו מייבאים
אותו לתוך המודול שלנו. בתוך המודול שלנו יש לנו את כל הקומפוננטות האלו שבנינו חדשות, הודותינו, רשימת מוצרים, תפריט עליון והקומפוננט הראשית שמעלה את כל האפליקציה, ופה זה כתוב.
כל זה נמצא בתוך המודול שלנו. זה המודול שמובנה באנגולר, בראוזר מודול, ויש פה אפ ראוטינג מודול. ואם אנחנו נסתכל באפ ראוטינג מודול, אנחנו נראה שיש בו את כל הנושא של ניתוב.
עשו לזה כמו מיני תוכנה קטנה כשאני אומר מודול מבחינתי זה כמו תוכנה קטנה באנגולר ואנחנו יכולים לראות פה שהם כבר מייבאים את ה-NG מודול כדי לבנות את המודול זה האימפורט שלהם מתוך האנגולר המקורי זה המשתנה שבו נכתוב את כל הניתובים שלנו עוד דקה זה בעצם משתנה עזר ואנחנו יכולים לראות שהמשתנה עזר הזה נכנס כאן זה המשתנה הזה נכנס כאן
ולמעשה אנחנו נרשמים בתוך המודול הזה ואחרי זה עושים לו אקספורט כדי שאחרים יוכלו להשתמש בזה. האקספורט הזה זה בדיוק הראוטר מודול שאנחנו מייבאים אותו כאן למעלה.
בואו נתחיל לכתוב את הניתובים שלנו ואנחנו כותבים אותם כאן ב-Path. הניתוב הראשון שלנו יהיה Path, נוריד את ה-Children הזה, Children זה תת-ניתוב ואנחנו כרגע לא נעשה אותו, אולי בהמשך.
זה אומר כשמבקשים את דף הבית בלי משהו מיוחד, אנחנו עושים redirect to ומעבירים אותו לדף אחר לגמרי שנקרא לו product. ואנחנו צריכים לציין בגלל שזה ריק וזה יכול להתאים לכמה דברים, אנחנו צריכים לציין פה שpath match full.
זה אומר התאמה מלאה ולא התאמה חלקית. עשינו את הניתוב הראשון שלנו שמעביר את דף הבית לרשימת המוצרים. הניתוב השני שלנו יהיה הפרודקט הזה שבנינו. כשמישהו מבקש פרודקט אנחנו נעביר אותו לקומפוננטה ואין לנו את הקומפוננטה הזאת כי אנחנו בתוך מודול אחר.
זה החיסרון לעבור במודול אחר. בואו נלך לייבא את הקומפוננטה הזאת אחרת לא נוכל להשתמש בה. אז אני מייבא בעצם את הפרודקט ליסט ואני אומר כשמישהו מבקש פרודקט תעביר אותו לקומפוננטה product list.
בואו נמשיך כשמישהו יבקש דף about us נעביר אותו לקומפוננטה about us וכשמישהו יבקש חדשות news נעביר אותו לקומפוננטה של חדשות.
עכשיו נעשה כמה דברים מעניינים כשמישהו יבקש משהו שהוא לא קיים אצלי איך מסמנים משהו שהוא לא קיים שני כוכביות נעשה לו redirect לproducts לרשימת המוצרים arrow 404, page not found.
בואו נבדוק האם זה עובד. קודם כל שימו לב שזה עובר כבר לבד ישר לעמוד של פרודקטס, ואם אני אעשה פה aaa תראו שזה חוזר לעמוד של פרודקטס, ואם אני אעשה פה עוד פעם aaa זה כל פעם חוזר לי לעמוד של פרודקטס.
למה? כי אם אני מבקש משהו שלא קיים. אז הניתובים האלו כן עובדים. לשם בדיקה בואו נעביר אותו ל-bout us. ברגע שאני מעביר אותו ל-about us ומוחק פה תראו נהיה עמוד של-about us עכשיו נשאר לי בתפריט העליון לרשום את הכישורים הנכונים אז אנחנו מתחילים לטפל בנושא של תפריט עליון עכשיו כדי להשתמש בראוטינג הזה אנחנו צריכים בעצם לראות אותו בתוך הקובץ של תפריט עליון ולכן
אני צריך injection להגיד לאנגולר שיזריק לי את האובייקט ההוא לתוך קובץ JavaScript הזה לקובץ TypeScript הזה ואני אוכל להשתמש בו לשם כך אנחנו צריכים קונסטרקטור כי ככה בעולם של אנגולר מזריקים אובייקט קיים מתוך סרוויס חיצוני דבר ראשון אני צריך לייבא מתוך אנגולה ראוטר את הפונקציות שמטפלות בראוטינג יש פה הרבה פונקציות אני מייבא את הפונקציה
הבסיסית כרגע ועכשיו אני צריך שהוא יזריק לי אז אני משתמש בקונסטרקטור קונסטרקטור הזה שייך לעולם של ג'אווה סקריפט רגיל קונסטרקטור עצמו הולך להיות ריק הוא לא באמת מעניין אותי הקונסטרקטור הזה מה שמעניין אותי זה פה בסוגריים לתת לו משתנה שיהיה פרייבט או פאבליק אני אקרא לו כף תחתון ראוטר והוא יהיה בעצם הראוטר הזה.
מה שקורה שאנגולה רואה את הדבר הזה ומזריקה לי לפה, מעבירה לי בסוגריים של הפונקציה את הסרוויס שיש לו במודול, את האובייקט שיש לו במודול הראשי. וככה הקוד שלי מקבל לא סתם אובייקט ריק שאני יכול לעשות לו new, אלא את מה שמעודכן במודול הראשי.
עכשיו אני יכול לעשות כל מיני ניתובים עם זה, אבל אנחנו כרגע לא הולכים לכתוב קוד ופונקציה משלנו, תעשה לנו ראוטינג אנחנו נעשה את זה בתוך html כלינקים ובמקום href כזה אנחנו בעצם נשתמש ביכולות של אנגולר אז במקום href אנחנו כותבים
פה מאפיין של אנגולר שנקרא routerlink לאן הוא יפנה אותו אנחנו נגיד לו שיפנה לפרודקט זה צריך להיות מערך ובתוך המערך אנחנו אומרים לאן להפנות אותו לפרודקט יכלנו לשים פה בתוך המערך הזה פסיק ולתת לו