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

מבנה בסיסי של פרויקט אנגולר

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

תיקיית src

תיקיית src היא התיקייה הראשית שבה נמצא כל קוד המקור של האפליקציה שלכם. בתוך src תמצאו מספר תיקיות וקבצים חשובים:

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

תיקיית app

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

src/
└── app/
    ├── app.component.ts
    ├── app.component.html
    ├── app.component.css
    └── app.module.ts

app.component.ts

זהו קובץ הרכיב הראשי של האפליקציה. הוא מכיל את הלוגיקה וההתנהגות של הרכיב הראשי.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

app.component.html

זהו קובץ התבנית (template) של הרכיב הראשי. כאן תכתבו את ה-HTML שיוצג ברכיב.

  
    Welcome to {{ title }}!
  

app.component.css

זהו קובץ ה-CSS של הרכיב הראשי. כאן תכתבו את הסגנונות שיחולו על הרכיב.

h1 {
  color: #2c3e50;
}

app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

תיקיית assets

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

תיקיית environments

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

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

תיקיית node_modules

תיקיית node_modules מכילה את כל התלויות (dependencies) שהאפליקציה שלכם צריכה. תיקייה זו נוצרת אוטומטית על ידי NPM בזמן התקנת חבילות חדשות.

קבצים נוספים בתיקייה הראשית

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

• angular.json – קובץ הגדרות עבור Angular CLI.
• package.json – קובץ המכיל מידע על הפרויקט ורשימת התלויות שלו.
• tsconfig.json – קובץ הגדרות עבור TypeScript.
• README.md – קובץ המתאר את הפרויקט וכולל הוראות שימוש.

סיכום

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

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

במאמר הבא נלמד על קומפוננטות באנגולר.