עידן יצחקיבמדריך זה אני רוצה לעבור מאוד מגבוה על פתיחה של פרויקט באנגולר CLI, מבט מהיר על מבנה הפרויקט שמקבלים כברירת מחדל ומשם התקדמות לצורות בניה בפרויקט, תיקשורת בין רכיבים.
בגדול כל מה שצריך לדעת כדי להתחיל לעבוד עם אנגולר CLI, במידה שנדבר על נושאים שיש להם פוסט באתר שמסביר ומדריך אז אקצר את ההסבר בפוסט כאן ואצרף הפניה לפוסט שמסביר ומרחיב.
נתחיל כמובן בהתקנה של אנגולר
דבר ראשון נתקין nodejs
https://nodejs.org/en/download/
זה הבסיס כדי שנוכל להתקין את אנגולר ועוד חבילות לפי הצורך.
דבר שני נתקין את אנגולר CLI
לחיצה על כפתור וונדוס , לכתוב – CMD, ללחוץ לחצן ימני ולבחור הרצה כאדמיין.
בחלון שנפתח יש לכתוב את הפקודה הבאה, זה לא משנה באיזו ספריה אתם נמצאים
npm install -g @angular/cli
אם NPM לא מזוהה, בצעו ריסטארט למחשב ובדקו שוב.
בשלב זה סיימנו עם ההתקנה ועכשיו נפתח פרויקט חדש, יש לנווט לספריה שאתם רוצים שתכיל את הפרויקט ושוב ב-CMD יש לכתוב את השורה הבאה:
ng new my-app
my-app זה שם הפרוייקט שלנו, נוכל להחליט על כמעט כל שם שנרצה.
בסיום הבניה כל הפרויקט יהיה בתוך ספריה באותו השם של הפרויקט.
אבל לפני זה נשאל במספר שאלות כדי שהמערכת תכין לנו את הפרויקט כמו שאנחנו צריכים.
בגירסה שמותקנת לי בזמן הכתיבה, אלו סדר השאלות:
- האם אנחנו רוצים את הפרויקט ב-strict – אני ממליץ שכן, אבל למי שחדש בעולם ה-TS עדיף אולי להתחיל בלי.
- האם אנחנו רוצים routing – במידה ואנחנו מתכננים פרויקט של יותר מדף אחד אז עדיף לענות שכן – Y.
- בשלב הזה נשאל איזה סוג של קבצי style נרצה, הראשון הוא כמובן CSS, אני מעדיף את ה-SCSS.
הניווט באופציות נעשה בעזרת החצים.
כשיסתיים התהליך, נפתח את VSCODE בתוך הספריה של הפרויקט שלנו (בתוך הספריה בשם my-app).
אפשר לפתוח CMD בתוך VS CODE על ידי לחיצה של CTRL+SHIFT+~ , בטרמינל שנפתח יש לכתוב:
ng s -o
במקרה הזה הפרויקט ייבנה ובסיום יפתח הדפדפן אוטומטית.
ואפשר גם ככה:
npm start
במקרה הזה, בסיום הבנייה המחשב יתן לכם לינק שצריך לגלוש אליו כדי לראות את האתר.
