Routing Parameters

תמלול ההרצאה: Routing Parameters

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

1. 00:02

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

2. 00:30

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

3. 00:46

   ניכנס למודול שמטפל בראוטינג, יש לנו מודול נפרד לזה, ונוסיף פה news.details/id או שאפשר news.id זה גם בסדר. ונעשה קומפוננטה חדשה, news details component.

4. 01:12

   אז אם יש לנו news רגיל, אנחנו נכנסים ל-news component, אם יש לנו news עם איזשהו מספר, שימו לב, המספר הזה יהיה .id, יכלתי לתת פה כל שם, לדוגמה newsid, לא משנה איזה שם, איזשהו פרמטר, אנחנו ניכנס לרכיב הזה, news details.

5. 01:31

   בואו רק נעשה את הקומפוננטה הזאת. איך אנחנו עושים קומפוננטה, אתם זוכרים? אנחנו פותחים את התיקייה שבה נמצא App מודול שלנו, הנה App מודול שלנו, לוחצים Shift, Right Click, Open Command, OpenCMD, מי שיש לו פאוור של שירשום CMD, ועכשיו הולכים לאתר של Angular CLI ומעתיקים

6. 01:59

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

7. 02:26

   news details בוא נעשה את זה ככה news details הנה הוא יצר לי אני ישר מוחק את הקובץ של ספק באפ מודול אני מייבא את הקומפוננטה שהוא יצר לי יפה מאוד אז יש לי את הקומפוננט ה-news details והולכים אליה רק כשכותבים news/מספר.

8. 02:55

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

9. 03:12

   נעשה איזשהו h1 ונרשום all news ובפנים נעשה לינקים פשוטים. קודם כל קו מפריד ועכשיו לינק פשוט href. במקום href אני משתמש ב-router-link, הרי אנחנו רוצים שאנגולר יכניס לנו, יטפל בלינק הזה, וכותבים לו איזה לינק אנחנו רוצים.

10. 03:36

    זה יהיה מערך שבו הפרמטר הראשון זה לאן לנווט, והפרמטר השני זה יהיה לדוגמה /1 /2 starting cell of chai מתחילים מבצע תה, חדשה מספר 2 זה יהיה מניר צ'אי סולד אאוט נגמר כל התה שלנו בואו נראה אם זה יעבוד לנו אני לוחץ F12 שם קונסול כדי לראות אם יש הודעות שגיאה תמיד קונסול צריך להיות פתוח ניוז חדשות קודם כל להעביר את זה ל-BR פה

11. 04:23

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

12. 04:51

    איך אנחנו נדע עם איזה פרמטר הגענו לעמוד הזה. אז אנחנו הולכים לניוס דיטלס, בואו נעשה פה h1 ופה אני רוצה לדעת איזה מספר, נכנסתי לחדשה מספר 1 או לחדשה מספר 2, לאן נכנסתי וכדי לדעת מאיזה פרמטר הגעתי אני צריך לייבא מחלקה של Active Route From Strudel Angular/Router ופה אני אומר לו שאני רוצה Active Route

13. 05:24

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

14. 05:43

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

15. 06:19

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

16. 06:44

    הנה הוא מדפיס לי 2, והנה הוא מדפיס לי 1.