Angular 4 - Modal Bootstrap

תמלול ההרצאה: Angular 4 - Modal Bootstrap

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

1. 00:02

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

2. 00:21

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

3. 00:41

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

4. 01:04

   הזה הוא הרי חלק ממערך זה הרי array ולכל array יש פה for each for each זה למעשה כמו לולאה שהיא תירץ על כל הרכיבים בפנים והפונקציה מקבלת product זה למעשה פונקציית חץ הראתי לכם שזה כמו לקרוא לפונקציה רגילה ובסוגריים שלה בתוך הפונקציה שלי היה כתוב product זה הפרמטר שהיא מקבלת למעשה זה מוצר אחד שני שלישי רביעי ועבור המוצר הנוכחי,

5. 01:29

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

6. 01:48

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

7. 02:04

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

8. 02:14

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

9. 02:28

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

10. 02:46

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

11. 03:08

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

12. 03:26

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

13. 03:35

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

14. 03:53

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

15. 04:17

    גרסה 4 עדיין לא סופית היא עדיין בבטא באלפא בהרצה וראינו כבר ב-CSS את כל העיצומים, בקומפוננטות ראינו כל מיני רכיבים, עכשיו הגענו לג'אווה סקריפט.

16. 04:28

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

17. 04:44

    והנה הדוגמה, הופה, קפץ לנו חלון, אנחנו יכולים לעשות לו Close, זה בדיוק מה שאני צריך בוא ניקח את הדוגמה הזאת ונעתיק אותה פשוט אלינו אנחנו רוצים את זה ב-checkout אחרי שבן אדם עושה checkout שיהיה לו חלון קופץ איך הדבר הזה בנוי הדבר הזה בנוי על זה שיש פה איזשהו div מוחבא שברגע שאני לוחץ על ה-button ה-button הזה שימו

18. 05:06

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

19. 05:31

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

20. 05:46

    אני רוצה להעיף את הכפתור save changes להשאיר רק את ה-close, להחליף את הכותרת הזאת ולעשות הודעה יותר יפה, בואו נעשה את זה, אז יש לנו במודל את ה-header, את הכותרת הראשית, שזה יש לנו את ה-body ויש לנו את ה-footer למטה, אז למטה ב-footer את ה-button הכחול של save changes, button primary אני

21. 06:03

    מעיף ומשאיר רק את הכפתור close ושימו לב איך הוא יודע מה לעשות, כתוב פה data dismiss למודל, זאת הפעולה, כל פעם שאתם רואים מקף זה אומר שהדבר הזה הוא לא סטנדרט של html, כל מה שמקף זה אומר שאנשים עשו את זה לבד המתכנתים עשו לבד בכוונה מפרידים בין תקן למשהו שאנשים עושים לבד על ידי המקף המקף זה רכיב שבעולם של html לעולם בתקן הוא לא

22. 06:28

    יהיה אמרו שזה מה שאנשים יעשו לבד מה שהם רוצים כל מיני רכיבים לבד אתם יכולים לבד לעשות רכיבי javascript לבד לעשות אובייקטים ואלמנטים אוקיי אז טיפלנו בלמטה בואו נטפל למעלה Your order number is... ובהדר נטפל בכותרת שלו ונרשום Order Completed, לא יודע מה, תעשו איזושהי הודעה שבאה לכם.

23. 06:53

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

24. 07:15

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

25. 07:39

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

26. 08:02

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

27. 08:20

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

28. 08:34

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

29. 08:56

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