Components

Komponentlar

Angular'da dasturlar yaratish uchun asosiy qurilish bloklari.

Komponentlar loyihangizni tushunish oson va aniq vazifalarga ega qismlarga ajratish uchun tuzilmani taqdim etadi, bu esa kodingizni saqlash va kengaytirishni osonlashtiradi.

Mana, Todo ilovasini qanday qilib komponentlar daraxtiga bo'lish mumkinligi haqida misol:

Ushbu qo'llanmada biz Angular'da qanday qilib komponentlar yaratish va ulardan foydalanishni ko'rib chiqamiz.

Komponentni aniqlash

Har bir komponent quyidagi asosiy xususiyatlarga ega:

• @Component dekoratori — ba'zi konfiguratsiyalarni o'z ichiga oladi
• HTML shabloni — DOM'da nima ko'rinishini boshqaradi
• CSS selektori — komponentning HTML'da qanday ishlatilishini aniqlaydi
• TypeScript sinfi — holatni boshqarish, foydalanuvchi kiritmalarini qayta ishlash yoki serverdan ma'lumot olish kabi funksiyalarni o'z ichiga oladi.

Mana, TodoListItem komponentining soddalashtirilgan namunasi:

// todo-list-item.component.ts
@Component({
  selector: 'todo-list-item',
  template: ` <li>(TODO) Angular Essentials qo'llanmasini o'qish</li> `,
})
export class TodoListItem {
  /* Bu yerda komponentning xatti-harakatlari aniqlanadi */
}

Komponentlarda shuningdek quyidagi qo'shimcha metadata'larga ham duch kelishingiz mumkin:

• standalone: true — Komponentlarni yozishni soddalashtirish uchun tavsiya etiladigan yondashuv
• styles — Komponentga qo'llanadigan CSS uslublarini o'z ichiga oladigan satr yoki satrlar massivi

Shu bilimlarni hisobga olib, TodoListItem komponentining yangilangan versiyasi:

// todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  template: ` <li>(TODO) Angular Essentials qo'llanmasini o'qish</li> `,
  styles: `
    li {
      color: red;
      font-weight: 300;
    }
  `,
})
export class TodoListItem {
  /* Bu yerda komponentning xatti-harakatlari aniqlanadi */
}

HTML va CSS'ni alohida fayllarga ajratish

HTML va/yoki CSS'ni alohida fayllarda boshqarishni afzal ko'radigan jamoalar uchun Angular quyidagi ikkita qo'shimcha xususiyatni taqdim etadi: templateUrl va styleUrl.

Oldingi TodoListItem komponentidan foydalangan holda, muqobil yondashuv quyidagicha ko'rinadi:

// todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  templateUrl: './todo-list-item.component.html',
  styleUrl: './todo-list-item.component.css',
})
export class TodoListItem {
  /* Bu yerda komponentning xatti-harakatlari aniqlanadi */
}

<!-- todo-list-item.component.html -->
<li>(TODO) Angular Essentials qo'llanmasini o'qish</li>

/* todo-list-item.component.css */
li {
  color: red;
  font-weight: 300;
}

Komponentdan foydalanish

Komponent arxitekturasi afzalliklaridan biri shundaki, ilovangiz modulli bo'ladi. Ya'ni, komponentlar boshqa komponentlarda ham ishlatilishi mumkin.

Komponentdan foydalanish uchun quyidagilarni qilishingiz kerak:

1. Komponentni faylga import qiling
2. Uni komponentning imports massiviga qo'shing
3. Komponent selektoridan shablonda foydalaning

Mana oldingi TodoListItem komponentini import qiladigan TodoList komponentining namunasi:

// todo-list.component.ts
import { TodoListItem } from './todo-list-item.component.ts';
@Component({
  standalone: true,
  imports: [TodoListItem],
  template: `
    <ul>
      <todo-list-item></todo-list-item>
    </ul>
  `,
})
export class TodoList {}

Keyingi qadam

Endi siz Angular'da komponentlar qanday ishlashini bilasiz, ilovamizga dinamik ma'lumotlarni qanday qo'shish va boshqarishni o'rganish vaqti keldi!