Angular 4 - Toastr JS

תמלול ההרצאה: Angular 4 - Toastr JS

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

1. 00:02

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

2. 00:28

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

3. 00:42

   בואו נעשה משהו כזה דבר, הנה, קפצה לי הודעה Quantity Updated. אז זה מה שאני רוצה, כשבחנות שלי מתעדכנת הכמות, שתקפוץ לי פה הודעה בצד, ויש לי ספרייה מוכנה של טוסטר שעושה את זה. אם אנחנו נראה את זה, זה Non-Blocking Notification.

4. 00:57

   מה זה אומר Non-Blocking? שזה רץ כאילו ב-thread נפרד ולא מפריע לעבודה שוטפת שלה זה ו-JQuery הם מסתמכים על ספרי ה-JQuery ו-JQuery חובה יפה מאוד אז בואו נלמד איך לחבר ספרי הכלשהי במקרה הזה GS לתוך הפרויקט שלנו כמו שאני מראה לכם עכשיו לגבי ספרי הטוסטר

5. 01:15

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

6. 01:38

   פה אפילו קרופי בוא נראה מה זה עושה לנו נלך לאינדקס ונדביק את זה כאן לינק מוכן עם css ובדיקת אינטגריטי הכל מצוין ואנחנו לא צריכים map map זה בשביל לעשות debugging שורה אחרי שורה ב-f12 אנחנו לא צריכים את זה מין css אתם יודעים מה עדיף מין css ומין gs מינט css זה אותו דבר כמו css מלא רק תופס פחות מקום אז בוא נעשה את זה מינט css אז נמחק

7. 01:58

   את הדבר הזה ונכניס מינט css ואני לוחץ על tab ונעשה גם gs אז יש לנו פה סקריפט עם javascript ומינט css ויפה מאוד חיברנו את שני הלינקים מה עוד הם חייבים jquery בגלל שהם חייבים jquery אז בוא נחזיר את ה jquery לכאן למציאות שלנו אני משתמש פה ב jquery את זה אני האמת לא צריך צריך ואת זה אני לא צריך

8. 02:29

   אז אני צריך כאן jQuery ואת מה שהם ביקשו את ה-CSS שלהם ואת ה-GS יפה מאוד בוא נקרא הלאה ואז עשינו פה cdn אחרי זה נעשה install אני אראה לכם גם איך עובדים עם install ועכשיו יש לנו quick start עם שלושה צעדים אחד זה לעשות CSS שתיים זה לעשות GS ושלוש זה פשוט להפעיל את זה ויש לנו פה הודעה לדוגמה toaster.success שהניסוי הצליח

9. 02:56

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

10. 03:13

    וורנינג או לא יודע מה טוסטר קוונטיטי אפדייט טוסטר אוקיי ותעביר לו בסוגריים את הכמות החדשה אוקיי עכשיו שימו NG מודל הוא זה שיעדכן לי את הכמות בתוך המשתנה פרודקט קוונטיטי ואני אומר חוץ מכל העדכון הזה כשיש לך אירוע של input תפעיל את הפונקציה שלי שנקראת update quantity toaster

11. 03:34

    עכשיו נשאר לי לרשום רק את הפונקציה הזאת בוא נעשה את הפונקציה הזאת ככה ctrl c הולכים לכאן במקום הדבר הזה כותבים את הפונקציה שלי נקרא לה פה למשתנה הזה new quantity שיהיה number ונלך לכאן נעתיק עוד פעם את הtoster.success ונרשום פה הודעה כלשהי בסגנון של new quantity updated to 3 units ופה נעשה

12. 04:01

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

13. 04:30

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

14. 04:54

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

15. 05:19

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

16. 05:30

    נעשה ביי, הופה, קפצנו.