Angular 4 - Url Rewrite

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

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

1. 00:02

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

2. 00:28

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

3. 00:55

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

4. 01:07

   אז בואו נעשה ככה שאנגולר יעבוד בתיקייה slash app, אז כדי שכל הניתובים יהיו slash app, אז נלך ל-routing, איפה ה-routing שלנו? אין ה-routing שלנו, ונגיד לו שכל הניתובים הם תיקיית slash app, זאת אומרת כאן אני מוסיף app/ פה נעשה גם app/ גם פה app/ וגם כאן, זה הילדים אז הם תחת סלאש ניוז ונעשה טעינה של פרודקט קומפוננט ליסט שלא יעשה לי רדירקט

5. 01:36

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

6. 02:02

   הוא בצד שמאל למעלה. כשזה היה href רגיל הוא למעשה היה עובר לאותו הדף אבל היה טוען מחדש את כל הדף כי by default עושה טעינה מחדש.

7. 02:12

   וב-news יש לנו, נזכרתי שיש לנו ב-news בחדשות גם כן ניתוב לפירוט של החדשות, כאן אפי אפי וב-news details יש לנו ניתוב בקוד כאן route.navigate בקוד יש לנו, יופי, שמרתי את הכל.

8. 02:29

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

9. 02:54

   ל-about us ל-news לחדשות חוזר חזרה הם נשארים במוצר כי אני מטייל בתוך אותו דף בעצם למרות שה url משתנה הוא מטייל בתוך אותו דף ובגלל שזה href פשוט ואתם יכולים לראות פה למטה שיש פה href פשוט הופה אתם רואים הסל נעלם לעומת זאת אם אני אחזיר חזרה את הדבר הזה אתם תוכלו לראות שעכשיו אני קונה את המוצר ועוד

10. 03:16

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

11. 03:35

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

12. 03:44

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

13. 03:58

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

14. 04:08

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

15. 04:22

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

16. 04:45

    זה נקרא just in time. just in time שהוא מגיש לדפדפן, זה המנוע של אנגולר, מגיש לדפדפן את הקומפוננטות הנכונות, כשאתם לוחצים על כל מיני קליקים. למעשה זה המנוע של אנגולר שעובד אצל הלקוח, וזה נקרא Just-In-Time, הרי אנחנו עושים קומפוננטות ואנחנו עושים משהו כזה מופשט, ההפשטה הזאת, צריך לתרגם אותה בסוף ל-JavaScript

17. 05:06

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

18. 05:29

    רוצה להכין את זה מראש בשרת וזה נקרא a head of time compiler קמפול מראש של אנגולר a head of time compiler למעשה חוסך את הפעולה הזאת בתחנה של הלקוח בוא נראה Ahead of time compiler באתר של אנגולר, נקרא קצת למה זה טוב, בואו ניכנס לאתר של אנגולר, הנה אנחנו באתר של אנגולר עצמם ויש להם פה

19. 05:42

    כתבה על Ahead of time compilation שזה נמצא בתוך טכניקות ל-setup and deployment ובתוך זה Ahead of time compilation עכשיו אתם תבינו כמה שזה חשוב אז יש שתי צורות יש Ahead of time שזה אומר מקומפל מראש ויש Just in time בדיוק בזמן כשתחנה מקמפלת את מה שצריך בדיוק כשצריך את זה ומה ההבדל ביניהם?

20. 06:11

    ש-Just-In-Time זה כמו שעובדת Java, זה דרך אגב .NET עובד ככה. למעשה לקמפל דברים בתחנת עבודה לפי הצורך. אנחנו עוברים מהשיטה אחת לשנייה, למה? למה Head of Time Compilation טוב? קודם כל, תחנה עובדת מהר, היא לא צריכה לקמפל הכל בלייב, יש לה הכל כבר מוכן.

21. 06:28

    יש לה פחות בקשות לשרת, כי הכל כבר מוכן, כולל HTML ו-CSS. הכי חשוב שהגודל של אנגולר עצמו, אנגולר פריימוורק, הרבה יותר קטן, הוא למעשה מגיע מקומפיילד כבר מראש ולא צריך את כל המנוע של אנגולר שבתחנה הירוט הנה בבקשה, there is no need to download angular compiler, לא

22. 06:47

    צריך להוריד את הקומפילטור של אנגולר if the app is already compiled, ותסתכלו מה כתוב פה כי זה כבר מקומפיילד, קומפיילר תופס חצי מהגודל של כל האתר, רק הקומפיילר שלו, רק המנוע של אנגולר, אתם מורידים לא את האתר, אתם מורידים איזה מנוע של אנגולר אז לנו כמתכנתים זה נוח ללקוח זה מיותר לגמרי להוריד את המנוע של אנגולר אז אנחנו נביא

23. 07:05

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

24. 07:20

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

25. 07:42

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

26. 07:55

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

27. 08:21

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

28. 08:41

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

29. 09:03

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

30. 09:15

    במערכת מאחורי הקלעים יש קובץ Main TS שמריץ את הכל. ה-Main TS זה הקובץ הראשי שמריץ בעצם את ה-App Module, אז זה מריץ את המודול שלנו, נכון? יש לנו את המודול הראשי שבו כתובות כל הרכיבים, מי מריץ את המודול הזה? אתם זוכרים, כן? יש לנו פה הפ מודול, זה הפ מודול שלנו עם כל הקומפוננטות ועם כל הרכיבים, הפ מודול הזה,

31. 09:35

    מי שמריץ אותו נקרא קובץ Main TS, ו-Main TS הזה מריץ את המודול הזה, זה הקובץ הראשי, ויש פה פונקציה שנקראת Enable Product Mode, והיא רק אם אתם מציינים שאתם בפרודקשן ולא בסביבת פיתוח, בסביבת ייצור אמיתית.

32. 09:50

    סביבת פרודקשן מה שהדבר הזה משנה הוא עושה שאנגולר יעבור על כל הבדיקות פעם אחת ולא פעמיים עכשיו בזמן פיתוח אנגולר עובר על הכל פעמיים וזה מאיט את הקצב אם אני מפעיל את הפונקציה הזאת הוא יעבור על הכל פעם אחת ובואו נראה איך אנחנו גם יודעים האם הוא עובר פעם אחת או פעמיים אנחנו לוחצים F12 ובקונסול אתם מקבלים פה Angular is running in development mode

33. 10:13

    core תקרא לפונקציה enable prod mode אתם רואים enable prod mode שזה בדיוק מה שעשינו פה enable prod mode אז אם אנחנו רוצים לעבור לסביבת ייצור אנחנו צריכים בעצם להעביר פה משתנה שיפעיל לי את הפונקציה הזאת ואז אנגולר יעשה בעצם בדיקות פעם אחת הוא יהיה קצת יותר חשוף לבעיות אבל

34. 10:33

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

35. 10:55

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

36. 11:17

    לו NG prod עכשיו זה ויש כאלו שאומרים שהוא כבר כשאתה עושה prod יעשה אוטומטי aot אני אעשה ליתר ביטחון aot head of time compiler ועכשיו אני אומר לו תקשיב כשאתה בונה את כל הלינקים לקבצי javascript שאתה הולך לייצר תעשה לי תיקייה יחסית שנקראת deploy url בתיקיית app עוד פעם מינוס מינוס deploy url בתיקייה יחסית שאני אקרא לה app

37. 11:42

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

38. 11:54

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

39. 12:06

    אוי, לא עבד לי, מה קרה, מה קרה, מה קרה? קודם כל הוא מייצר פה אחרי הקמפול קבצים מוכנים שהוא קורא להם NG-Factory, כאילו מוכנים, והוא כותב לי שבקארט סרוויס פרופרטי, מאפיין של קו תחתון קארט סרוויס, is private וצריך לשנות אותו כנראה לפאבליק והוא נמצא בקארט קומפוננט יש לו בעיה עם ה-private בקונסטרקטור טוב בוא נלך לקונסטרקטור שלי של הקומפוננטה

40. 12:30

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

41. 12:58

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

42. 13:08

    הנה, עכשיו שמרתי אותו. או, זה הצליח, חברים, אתם רואים? לקח לו 20 שניות לעשות את זה, וזה הצליח. ושימו לב איזה קבצים הוא עשה, זה נורא מעניין.

43. 13:17

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

44. 13:40

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

45. 13:53

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

46. 14:04

    יכול להיות שעם תמונות הוא יתפוס יותר. כן, אבל עדיין זה פחות מחצי. טוב, בואו נעתיק את כל ה-distribution, את כל התיקי ה-distribution copy לשרת. לתיקי ה-wwwroot/app.

47. 14:16

    ב-wwwroot יש את כל הצד של השרת, ב-app אני שם את החלק של האנגולה. הנה הוא מעתיק לי. יופי עכשיו אנחנו צריכים לכוון את הדף שילך ל-app/index בואו נבדוק שזה עובד נלך ל-localhost או שקראנו לו practical/app/index קראנו לו practical נכון בוא נעשה f12 נראה מה הבעיה נראו שהוא הצליח

48. 14:37

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