מדריך Angular: התקנה והגדרת סביבת עבודה

מדריך Angular: התקנה והגדרת סביבת עבודה

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

מה זה אנגולר?

אנגולר הוא פריימוורק פיתוח צד לקוח מבית גוגל, המיועד לפיתוח אפליקציות ווב מתקדמות (SPA – Single Page Applications). אנגולר מאפשר לנו לכתוב קוד נקי, מסודר וקל לתחזוקה באמצעות כלים ופיצ'רים מתקדמים.

דרישות מוקדמות

לפני שנתחיל בהתקנת אנגולר, עלינו לוודא שמותקנות במחשב שלנו התוכנות הבאות:

  • Node.js – גרסה 12 ומעלה
  • NPM – מנהל החבילות של Node.js

ניתן להוריד ולהתקין את Node.js מהאתר הרשמי: Node.js

התקנת Angular CLI

Angular CLI הוא כלי שורת פקודה המאפשר לנו ליצור ולהגדיר פרויקטים באנגולר בקלות. להתקנת Angular CLI נשתמש בפקודת NPM:

npm install -g @angular/cli

יצירת פרויקט חדש

לאחר שהתקנו את Angular CLI, נוכל ליצור פרויקט אנגולר חדש באמצעות הפקודה הבאה:

ng new my-angular-app

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

הרצת האפליקציה

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

cd my-angular-app
ng serve

הפקודה ng serve תפעיל שרת פיתוח ותאפשר לנו לגשת לאפליקציה דרך הדפדפן בכתובת http://localhost:4200.

מבנה הפרויקט

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

  • src – תיקיית המקור המכילה את כל קבצי הקוד של האפליקציה.
  • app – תיקייה בתוך src המכילה את רכיבי האפליקציה הראשיים.
  • assets – תיקייה המכילה קבצים סטטיים כגון תמונות וגופנים.
  • environments – תיקייה המכילה קבצי הגדרות עבור סביבות פיתוח שונות (פיתוח, ייצור וכו').

יצירת קומפוננטה ראשונה

קומפוננטה (Component) הוא אחד מהאבני היסוד של אנגולר. ניצור רכיב חדש באמצעות הפקודה הבאה:

ng generate component my-first-component

הפקודה תיצור תיקייה חדשה בשם my-first-component בתוך תיקיית app ותכיל ארבעה קבצים: קובץ HTML, קובץ CSS, קובץ TypeScript וקובץ spec.ts עבור בדיקות יחידה.

סיכום

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

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

המאמר הבא בסדרה: מבנה קבצים ותיקיות בפרויקט Angular

שתפו את הפוסט

דילוג לתוכן