רכיבים - components

תמלול ההרצאה: רכיבים - components

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

1. 00:03

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

2. 00:33

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

3. 01:01

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

4. 01:28

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

5. 01:59

   ועכשיו אני צריך ברכיב הראשי בקומפוננט הראשית לציין שבמקום הספציפי הזה תביא לנו את ה-HTML של ה-Header.

6. 02:11

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

7. 02:40

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

8. 03:03

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

9. 03:18

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

10. 03:38

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

11. 03:54

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

12. 04:08

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

13. 04:39

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

14. 04:54

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

15. 05:20

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

16. 05:51

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

17. 06:19

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

18. 06:44

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

19. 07:12

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