در این جلسه یاد می‌گیریم چگونه در Angular 17 یک کامپوننت جدید بسازیم و ساختار Template آن را مدیریت کنیم. این جلسه یکی از مهم‌ترین بخش‌های مسیر یادگیری Angular است، زیرا کامپوننت‌ها هسته‌ی اصلی معماری این فریم‌ورک محسوب می‌شوند.

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

کامپوننت یک واحد مستقل در Angular است که شامل:

• منطق (Logic)
• داده (Data)
• قالب نمایش (Template)

هر بخش از رابط کاربری در Angular با استفاده از کامپوننت ساخته می‌شود.

ساخت یک کامپوننت جدید با Angular CLI

برای ساخت یک کامپوننت جدید، از دستور زیر استفاده می‌کنیم:

ng generate component user-card

یا نسخه کوتاه‌تر:

ng g c user-card

پس از اجرای این دستور، پوشه‌ای با نام user-card در مسیر /src/app/ ساخته می‌شود که شامل چهار فایل زیر است:

• user-card.component.ts
• user-card.component.html
• user-card.component.css
• user-card.component.spec.ts (اختیاری برای تست)

در Angular 17 کامپوننت‌ها به صورت Standalone ساخته می‌شوند و نیازی به ماژول ندارند.

بررسی فایل‌های کامپوننت

فایل TypeScript (منطق کامپوننت)

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  templateUrl: './user-card.component.html',
  styleUrl: './user-card.component.css'
})
export class UserCardComponent {
}

نکات مهم:

• selector نام تگ HTML است که می‌توانید از آن برای نمایش کامپوننت استفاده کنید.
• standalone: true نشان می‌دهد کامپوننت بدون نیاز به NgModule کار می‌کند.

ویرایش Template کامپوننت

Template فایل HTML است و بخش نمایش کامپوننت را تعیین می‌کند.

مثال:

<div class="card">
  <h2>User Card Component</h2>
  <p>This is a simple Angular component template example.</p>
</div>

می‌توانید هر نوع ساختار HTML را داخل Template قرار دهید.

استفاده از کامپوننت جدید در پروژه

برای نمایش این کامپوننت، کافی است selector آن را در هر صفحه یا کامپوننتی که خواستید قرار دهید.

مثال در فایل app.component.html:

<app-user-card></app-user-card>

نکات مهم

• نام کامپوننت باید معنادار و مرتبط با محتوای آن باشد.
• Template باید تا حد ممکن ساده، خوانا و قابل نگهداری باشد.
• اگر Template بزرگ است، آن را در چند کامپوننت کوچک‌تر تقسیم کنید.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.