Advanced Routing - Paging

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

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

1. 00:02

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

2. 00:17

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

3. 00:27

   אני הולך ל-news details ואני רוצה לעשות שני כפתורים נקסט ופרב. קדימה ואחורה אני עושה לי שני משתנה עזר nextnews ו-prevnews ומכניס לתוכם את החדשות שצריכים להישלף nextnews אני מוסיף אחד ו-prevnews אני מוריד אחד יש פה בעיה שג'אווה סקריפט הרי טייפ סקריפט מתורגם בסוף לג'אווה סקריפט יכול לחשוב שזה סטרינג

4. 00:52

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

5. 01:15

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

6. 01:37

   הדיו יהיה לי a שזה href למעשה שהולך לקחת router לינק לעשות לינק דינמי לאן לתוך מערך כאשר האיבר הראשון זה slash news והפרמטר אני הולך להכניס לו prev prev news.newsid אז זה הולך להיות לינק slash app slash news המספר הקודם שלו יפה מאוד וזה יהיה prev אותו דבר אני עושה ל-next ואני רוצה לשים פה ng if שאם לא קיים השדה הזה כי הוא לא הצליח לשלוף את החדשות הקודמות שלא יעשה לי

7. 02:14

   exception לבדוק שהשדה הזה בכלל קיים אז אני עושה פה ng if ה-prev news בכלל קיים prev news שהוא האובייקט הזה קיים ולמעשה אני צריך שיהיה קיים כל השדה הזה אבל אם האובייקט לא קיים גם השדה לא קיים.

8. 02:29

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

9. 02:49

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

10. 03:01

    עכשיו אני אראה לכם משהו חדש, מה עושים אם הוא לא קיים. אני עושה נקודה פסיק אלס.

11. 03:06

    שימו לב, זה משהו שלא ראינו לפני כן, איך לעשות אלס. ובאלס אני כותב מה להטעין במקרה של ng if לא מתקיים, ואז אני פותח פה ng-template ונותן לו לדוגמה מילת prev בלי לינק, אבל איך הוא יודע שזה זה? אני שם סולמית ואת השם הזה.

12. 03:25

    במקרה שהתנאי לא מתקיים, הוא יתאים לי את הטמפלייט הזה. ברור? זה ה-else שלו. מה יהיה לי ב-else? סתם מילת preview על המסך, סתם.

13. 03:34

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

14. 03:43

    אותו דבר אני רוצה לעשות כאן, להגיד לו, בואו נעשה אותו דבר, נקרא לו no next, ונעשה אותו ngif על זה. אז אני אומר לו, אם nextid לא קיים, מטעין no-next ו-no-next זה הטמפלייט הזה שסתם מילת נקסט כתובה כאן יפה מאוד דבר אחרון שאני רוצה להראות לכם כאן בתוך ה-ng-on-init אני

15. 04:05

    רוצה לעשות פה console.log Hello from ng-on-init in news details component בוא ניתן הודעה כאן אז ng-on-init