Angular 4 - ngModel

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

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

1. 00:02

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

2. 00:24

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

3. 00:34

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

4. 00:46

   תכף אנחנו נראה אותם לפני שאנחנו רואים אותם, אני רוצה להראות לכם פה, שימו לב שיש לי רק קלאס אחד שנקרא form control ו-quantity input שעשיתי לו, שני הקלאסים האלו בלבד.

5. 00:57

   פורום קונטרול זה של העיצוב זה שהוא יהיה כחול כזה יפה וכל שאר השדות דיברנו עליהם ברגע שהבאתי את המודול הזה אליי אני יכול להשתמש במשהו מדהים שמקל עליי את העבודה אני כבר לא צריך לחשוב איפה יושב בדיוק הערך ולהתחיל לחפש אותו לבד אני גם לא צריך לחשוב על איזה אירוע אני צריך להתלבש בקומפוננטה במקום כל זה אני יכול לכתוב דבר כזה זה נקרא banana inbox ng model

6. 01:26

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

7. 01:32

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

8. 02:16

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

9. 02:33

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

10. 02:55

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

11. 03:18

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

12. 03:31

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

13. 03:46

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

14. 04:11

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

15. 04:35

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

16. 04:51

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

17. 05:14

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

18. 05:38

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

19. 05:52

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

20. 06:02

    בתוך שם יש לי תווית וטקסטבוקס. עכשיו תסתכלו משהו מעניין, כשאני עושה קליק על ה-Name, הוא נכנס לכאן. אז יש לי תווית ויש לי טקסטבוקס. אז בואו נתחיל.

21. 06:11

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

22. 06:25

    אם היינו שולחים פרמטר לפי הפורום ברירת מחדל של html, הוא היה לוקח את ה-name הזה ומשייך עליו את ה-value ושולח לשרת כפרמטר. הוא היה כותב name html שווה נניח 7. עכשיו, אנחנו חייבים את השם הזה כי כשאנחנו נשתמש ב-NG מודל, זאת אומרת, כשאני רוצה להשתמש ב-NG מודל אני חייב שיהיה לי פה את ה-name הזה,