Angular shablonlari

Shablonlar - bu component ko‘rsatadigan HTML.

Shablonlar ma’lumotlarni ko‘rsatish va foydalanuvchi hodisalariga munosabat bildirish uchun oddiy HTMLni Angular shablon sintaksisi bilan birlashtiradi.

componentlar, shablonlar va selektorlar

• component - bu ko‘rinishni (uning shablonini) boshqaradigan class.
• Har bir komponentda HTMLda joylashtirgan selektor (masalan, app-root ) mavjud.
• root komponenti index.html ning <app-root> ichida ko‘rsatiladi.

Shablonlar qanday ishlaydi

1. Dastlabki ko‘rsatish: Angular komponentni yaratadi va shablonni, DOM va component maydonlari o‘rtasidagi simli ulanishlarni qayta ishlaydi.
2. O‘zgarishlarni aniqlash: foydalanuvchi hodisalari, taymerlar yoki sinxron ishda Angular shablon ifodalarini qayta baholaydi va faqat o‘zgargan narsalarni yangilaydi.
3. Ko‘rsatmalar: Holat asosida o‘rnatilgan ko‘rinishlarni (DOM fragmentlari) yaratish/yo‘q qilish.
4. Bog‘lash oqimi: Interpolatsiya/xususiyatni bog‘lash ma’lumotlarini ko‘rinishga yuborish. Voqeani bog‘lash brauzer voqealarini komponentga qaytaradi.

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>

Misol tushuntirildi

• {{ name }}: Interpolatsiya nom maydonini o‘qiydi va uni matn sifatida kiritadi.
• (click) : Voqea bog‘lash tugma bosilganda component holatini yangilaydi.

Shablon asoslari

Asosiy tushunchalar:

• Shablonlar - Angular component uchun ko‘rsatadigan HTML.
• Bog‘lanishlar: interpolyatsiya {{ ... }} , xususiyat [prop] va hodisa (event) .
• Shablon referatlari: mos yozuvlar elementlari yoki direktivalar uchun #box kabi mahalliy nomlar.
• Tuzilish ko‘rsatmalari ( *ngIf , *ngFor ) DOM tartibini o‘zgartiradi.

<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>

Kod tushuntirildi

• {{ name }}: matn uchun interpolatsiya.
• [src]: Element xususiyatini o‘rnatish uchun xususiyatni bog‘lash.
• (error) : Tasvir xatosi hodisasiga munosabat bildirish uchun hodisani ulash.
• #box: Shablon mos yozuvlar o‘zgaruvchisi; box.value joriy kirish qiymatini o‘qiydi.
• *ngFor ... index as i: Nolga asoslangan indeks bilan aylanish uchun tizimli ko‘rsatma.

Shablonlar umumiy ko‘rinishi

Quyidagi boblarda shablonlarni bosqichma-bosqich o‘rganing:

• Interpolyatsiya - qiymatlarni {{ ... }} bilan ko‘rsatish.
• Shablonga havola o‘zgaruvchilari - elementlarga murojaat qilish uchun #var dan foydalaning.
• Null-Safe Navigation (?.) - ixtiyoriy qiymatlarni xavfsiz o‘qing.
• Strukturaviy ko‘rsatmalar: Mikro-sintaksis - stenografiya *.
• ngTemplateOutlet - shablonni mos yozuvlar bo‘yicha ko‘rsatish.
• Andoza operatorlari va $event - hodisalar va kirishlarni boshqarish.
• *ngIf dagi kabi taxallus - mahalliy taxalluslar yarating.
• Shablonlardagi pipelar (|) - qiymatlarni formatlash va o‘zgartirish.
• Atribut bilan bog‘lash attr. - HTML atributlari bilan bog‘lash.
• *ngFor bilan TrackBy - ro‘yxatlarni tez va barqaror saqlang.