ngOnChange

תמלול ההרצאה: ngOnChange

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

1. 00:02

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

2. 00:28

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

3. 00:44

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

4. 01:06

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

5. 01:32

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

6. 01:55

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

7. 02:15

   אז אני פותח את התיקייה הראשית של המודול ויוצר בה קומפוננטה חדשה של Product Details. Shift-Right-Click, Open Command Window Here, פתחתי CMD, מי שנפתח לו פאור שלשום CMD ויעבור ל-Command Line, תקורת פקודה, NG generate component אני רוצה לעשות component בתוך תיקיית קומפוננטות ולקרוא לה product details ובואו נעשה no

8. 02:40

   spec true נראה לי שככה כותבים angular cli no spec true נראה לי פשוט צריך לרשום no spec בואו ננסה לא עזר טוב צריך שמה לראות איך כותבים את ה no spec הזה בקיצור הוא יצר לי product details ויש לי רכיב חדש של product details אני רוצה שזה יהיה חלון כזה גדול של מוצר, מכירים את זה שזה כזה חלון יפה וגדול, אני אשתמש בבוטסטראפ מודל, נעבור לגרסה 3,

9. 03:08

   JavaScript מודל, ונגנוב מפה את הדמו הזה, נכון? זה הדמו שעובד, ניקח מפה את הדמו הזה, אני לא צריך רק את הבטן, אני צריך רק את המודל, את החלון, נלך לפרודקט דיטלס החדש, ל-HTML שלו, נכניס את המודל, נחליף לו ID, My Product Details מודל, למה אני מחליף לו ID?

10. 03:29

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

11. 03:45

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

12. 03:57

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

13. 04:17

    על איזה פירוט אני רוצה להראות אז מה שאני עושה פה אני עושה לו פה strudel input זה אומר שמי שיקרא לי יעביר לי את המידע זוכרים יחד עם התגיד ונעשה את זה product to show, product to show שיהיה product מסוג product.

14. 04:33

    עכשיו, מה זה התגיד הזאתי input? בואו נעשה לאט לאט. input היא חלק מאנגולר core, שימו לב, הופה, פה התווסף לי ה input. input זה אומר משהו שמעבירים לי מבחוץ, product זה מ-app model product.

15. 04:45

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

16. 04:56

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

17. 05:23

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

18. 05:44

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

19. 06:08

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

20. 06:32

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

21. 07:00

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

22. 07:24

    ומי מכניס לכאן ערכים ברגע שמישהו עושה קליק על תמונה מופעלת פונקציה show details שמה שהיא תעשה היא תכניס את הפרודקט הנוכחי לתוך המשתנה ההוא בואו נעשה את זה כאן בסוף בסוף בסוף אני מכניס שאם מישהו לחץ על show details ואעשה this.product details שווה הפרודקט שלחצו עליו והמשתנה product דיטלס ישתנה וייכנס לי לתוך האינפוט כאן האינפוט

23. 07:50

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