قالب ها (Templates)
اینجا با «قالب های انگولار» آشنا می شوی. قالب (Template) یعنی همان HTML که کامپوننت نمایش می دهد. سپس با نحو مخصوص انگولار، داده نشان می دهیم و به رویدادها واکنش می دهیم.
کامپوننت، قالب و سلکتور
کامپوننت (Component) یک کلاس است. این کلاس نمای خود را با قالب کنترل می کند. هر کامپوننت یک سلکتور دارد. مثلاً app-root را در HTML می گذاری.
نحوه کار قالب ها
اول رندر انجام می شود. سپس تغییرات با Change Detection اعمال می شود. دایرکتیوها بخش هایی از DOM را می سازند یا حذف می کنند. جریان Bind کردن هم داده را هل می دهد و رویدادها را برمی گرداند.
نحو پایه قالب
در این نمونه، متن با Interpolation پر می شود. همچنین با رویداد کلیک مقدار تغییر می کند. Interpolation یعنی جایگذاری مقدار متغیر در متن.
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Hello {{ name }}</h3>
<button (click)="name = 'Angular'">Reset</button>
`
})
export class App {
name = 'World';
}
bootstrapApplication(App);
<app-root></app-root>
ملزومات قالب ها
اینجا چند الگوی پرکاربرد می بینی. Property Binding یعنی مقدار را به ویژگی می دهیم. Event Binding یعنی رویداد را می گیریم. متغیر محلی قالب نیز عنصر را معرفی می کند.
<p>Hello {{ name }}</p>
<img [src]="url" (error)="onMissing()">
<input #box (input)="save(box.value)">
<li *ngFor="let item of items; index as i">{{ i }}. {{ item }}</li>
نکته: Interpolation، HTML را به صورت متن امن می کند. برای ویژگی های داینامیک از Binding استفاده کن. عملگر ?. خطاهای تهی را کم می کند.
گام های عملی کوتاه (قالب های انگولار)
- یک ویژگی مثل
nameبساز. - با {{ name }} آن را در متن بگذار.
- یک رویداد کلیک اضافه کن.
- با [src] یک تصویر داینامیک بگذار.
- با *ngFor یک لیست بساز.
پیوندهای مرتبط
برای شروع، صفحه اولین اپ را ببین. سپس از قالب های انگولار به فصل Interpolation برو.
جمع بندی سریع
- قالب همان HTML کامپوننت است.
- Interpolation متن را پویا می کند.
- Binding داده و رویداد را مدیریت می کند.
- دایرکتیوها شکل DOM را عوض می کنند.
- عبارت ها را ساده و سریع نگه دار.