התקנה של אנגולר 4 על Visual Studio

תמלול ההרצאה: התקנה של אנגולר 4 על Visual Studio

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

1. 00:02

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

2. 00:22

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

3. 00:43

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

4. 01:06

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

5. 01:25

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

6. 01:46

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

7. 02:02

   אנחנו הולכים לעשות גם כל מיני הודעות קופצות ואנחנו הולכים להשתמש ב-JQuery וב-Bootstrap אנחנו הולכים להשתמש גם. אני רוצה שתהיה לי תוכנה שמתקינה ספריות של JavaScript אוטומט וכדי להתקין אותה אני אשתמש בתוכנה שנקראת Node. Node.js זה גם קצת שרת וגם NPM. גם החבילות המוכנות וגם השרת.

8. 02:26

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

9. 02:39

   Node.js והשרת ב-JavaScript עכשיו תופסים תאוצה בשוק. הכי חשוב לי שיש לי שם את ה-NPM. עכשיו לאחר שההתקנה הסתיימה, אנחנו יכולים להריץ אותו כאדמיניסטרטור ולהפעיל את ההתקנה של אנגולר.

10. 02:54

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

11. 03:10

    אתם יכולים לראות גם באיזה תיקייה זה מתקין אותה, שהיא זמינה לכולם, AppData. יפה, התקנו את האנגולר-CLI ועכשיו אנחנו מוכנים לפתוח Visual Studio ולעשות את הפרויקט הראשון.

12. 03:24

    מאוד חשוב לא לשכוח לעשות את זה כאדמיניסטרטור במחשב, כ-run as administrator, אחרת תקבלו המון הודעות שגיאה.

13. 03:33

    אני מפעיל Visual Studio, עושה File, New Project, ובוחר פרויקט חדש שנמצא בקטגוריה של אונליין. שימו לב, הוא לא מעודכן by default כברירת מחדל וצריך להוריד אותו.

14. 03:46

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

15. 04:01

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

16. 04:12

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

17. 04:36

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

18. 04:58

    אנחנו יכולים לפתוח את התיקייה של הפרויקט שלנו. הנה, זה הקבצים שיצר לנו Angular CLI, ואם אני עושה Rebuild, אם אני מפעיל אותו, אתם יכולים לראות שוויז'ואל סטודיו מריצה במקומנו את הפקודות של NPM Install.

19. 05:15

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

20. 05:39

    בהפעלה הראשונה להביא את כל הרכיבים החסרים את כל הספריות החסרות ואני לא צריך להעתיק