Components (Components Intro)

15 دقیقه Article

Components: آجرهای سازنده Angular 🧱

کامپوننت‌ها (Components) اصلی‌ترین بخش هر برنامه Angular هستند. هر چیزی که در صفحه می‌بینید، یک کامپوننت است!

کامپوننت چیست؟

یک کامپوننت بخشی از رابط کاربری (UI) است که منطق، ظاهر و استایل خودش را دارد. مثلاً هدر سایت، سایدبار، لیست محصولات و فوتر، هر کدام می‌توانند یک کامپوننت باشند.

اجزای یک کامپوننت:

هر کامپوننت در Angular معمولاً از 3 فایل اصلی تشکیل شده است:

Template (HTML): ظاهر و ساختار کامپوننت.
Class (TypeScript): رفتار و منطق کامپوننت (داده‌ها، متدها).
Styles (CSS): ظاهر و استایل‌های اختصاصی کامپوننت.

آناتومی یک کامپوننت:

به فایل app.component.ts نگاه کنید:

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

@Component({
  selector: 'app-root',           // نام تگ HTML برای استفاده از کامپوننت
  templateUrl: './app.component.html', // فایل HTML مربوطه
  styleUrls: ['./app.component.css']   // فایل‌های CSS مربوطه
})
export class AppComponent {
  title = 'my-first-app';
}

@Component Decorator: این دکوریتور به Angular می‌گوید که این کلاس یک کامپوننت است و تنظیمات آن (Metadata) را مشخص می‌کند.
Selector: نامی که با آن می‌توانیم از کامپوننت در HTML استفاده کنیم (مثل <app-root></app-root>).
TemplateUrl: آدرس فایل HTML.
StyleUrls: آرایه‌ای از آدرس‌های فایل‌های CSS.
Class: کلاسی که داده‌ها و متدهای کامپوننت را نگهداری می‌کند.

💡 نکته: معماری درختی (Tree Architecture): برنامه‌های Angular معمولاً یک کامپوننت ریشه (Root Component) دارند و بقیه کامپوننت‌ها فرزندان آن هستند.

✅ یاد گرفتید: کامپوننت‌ها بلوک‌های سازنده برنامه هستند که شامل کد HTML، CSS و TypeScript می‌شوند.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تمرین: ساخت Component ساده Easy

سوال تمرین

🎯 تمرین: Component با Template

یک component ساده با template inline بسازید.

پاسخ تمرین

TYPESCRIPT

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

@Component({
  selector: 'app-hello',
  template: '<h1>Hello Angular!</h1>'
})
export class HelloComponent {}

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo