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

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

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

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

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

ng generate component my-component

הפקודה תיצור ארבעה קבצים: my-component.component.ts, my-component.component.html, my-component.component.css, ו-my-component.component.spec.ts (לקבצי הבדיקות).

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

כל קומפוננטה מורכבת משלושה חלקים עיקריים:

1. קובץ TypeScript (.ts)

בקובץ TypeScript נגדיר את הלוגיקה של הקומפוננטה. נשתמש במחלקה (class) ובדקורטור (@Component) כדי להגדיר את הקומפוננטה:

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

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

2. קובץ HTML (.html)

בקובץ HTML נגדיר את התצוגה של הקומפוננטה:

<div>
  <h1>{{ title }}</h1>
  <p>Welcome to my component!</p>
</div>

3. קובץ CSS (.css)

בקובץ CSS נגדיר את הסגנונות של הקומפוננטה:

h1 {
  color: blue;
}

שימוש בקומפוננטה באפליקציה

כדי להשתמש בקומפוננטה שיצרנו, נשלב אותה בקובץ HTML של קומפוננטת השורש (root component), שהוא בדרך כלל app.component.html:

<app-my-component></app-my-component>

זהו! כעת הקומפוננטה שלנו תופיע בממשק המשתמש של האפליקציה.

סיכום

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

במאמר הבא – נלמד על Biding והעברת נתונים באפליקציית Angular.