Guard CanActivate

תמלול ההרצאה: Guard CanActivate

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

1. 00:02

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

2. 00:30

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

3. 00:52

   לא מקובל עליי שאלה איך להגביל פה את ה-ID לפי מספר החדשות שיש לי בפועל הרי סך הכל זה לינק תקין, 33 הוא תקין, אז אני רוצה למעשה ללכת ל-Routing Module ולהגיד שעל ה-News ID הזה יש מגבלה, ויש פה מאפיין מיוחד שבדיוק פותר לי את הבעיה הזאת שנקראת Can Activate.

4. 01:14

   המאפיין הזה, Can Activate, אומר לי האם מותר לעבור ל-ID הזה, האם מותר להפעיל את הלינק הזה, וזה מה שאני רוצה לעשות, אני רוצה לעשות את ה-Can Activate הזה, ויש גם Can Deactivate, האם מותר לצאת מהלינק הזה, כשאני בתוך הלינק נמצא האם מותר לי לנווט החוצה אז כן אקטיבייט הזה אם אתם תראו הוא מקבל מערך של בעצם של פונקציה שאמורה להגיד

5. 01:39

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

6. 02:05

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

7. 02:27

   יותר נוח ונעשה גם תיקייה ל-guards. אתם יודעים מה, פה יש לנו קומפוננט, עוד מודל פייפ, בואו נעשה תיקייה שנקרא לה guard, ויהיה בפנים use news guard.

8. 02:39

   והנה הוא יוצר לי news.guard ו-typeScript. יפה מאוד, אני בא לתיקיית guard, מוחק קובץ ספציפיקציות לבדיקה ומשאיר רק את ה-news guard, אז יש לי פה guard בפנים news guard וזה יפה מאוד.

9. 02:53

   בואו נלך לראות אותו, ושימו לב לעוד משהו חשוב שהוא כתב לי פה. וורנינג, guard is generated but not provided. מה זה אומר?

10. 03:00

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

11. 03:12

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

12. 03:22

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

13. 03:42

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

14. 04:03

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

15. 04:27

    אותו אחרי שאני רושם אני תמיד אוהב לרוץ ולרשום במודול כי אחרת אני פשוט שוכח newsguard מה יש לנו בתוך ה-newsguard הזה יש לנו פונקציה אחת שנקראת canactivate שמקבלת שני פרמטרים שזה next וstate מחזירה בוליאן או observable של בוליאן או promise promise זה כמו observable יותר פשוט זה הכל הסינכרוני או בוליאן רגיל ואם היא

16. 04:47

    מחזירה הפונקציה הזאת מחזירה true הניווט מצליח אם מחזירה false הניווט לא מצליח יופי זה למעשה ה-can activate זה מה שמריץ הגארד ההוא שיש לנו בתוך המודול הוא מחפש את הפונקציה הזאת כדי לא לשכוח לעשות אותה יש פה implement can