Angular qanday ishlaydi?

Angular MVC/MVVM arxitekturasiga asoslangan. U interaktiv veb-ilovalarni qurish uchun komponentlar, ma'lumotlarni bog'lash va bog'liqliklarni in'ektsiya qilishni ishlatadi.

Asosiy tushunchalar:

• Komponentlar: Ilovaning qurilish bloklari, shablon, sinf va uslublardan iborat.
• Modullar (NgModules): Bog'liq bo'lgan komponentlar, xizmatlar va boshqa elementlarni birlashtiradi.
• Ma'lumotlarni bog'lash: Model va ko'rinish o'rtasida ma'lumotlarni sinxronlashtiradi.
  • Yagona yo'nalishdagi bog'lash: Ma'lumotlar bir yo'nalishda oqadi (masalan, modeldan ko'rinishga).
  • Ikki tomonlama bog'lash [()]: Modeldagi o'zgarishlar ko'rinishga ta'sir qiladi va aksincha.
• Xizmatlar: HTTP so'rovlar bilan ishlash kabi funksionallikni ta'minlaydi va turli komponentlar tomonidan foydalanilishi mumkin.
• Bog'liqliklarni in'ektsiya qilish (DI): Bog'liqliklarni (masalan, xizmatlar) komponentlarga taqdim etish mexanizmi.
• Shablonlar: Ma'lumotlarni ko'rsatish va voqealarni boshqarish uchun Angular sintaksisi kengaytmalari bilan HTML.
• Direktivlar: DOM elementlarining xatti-harakatini yoki ko'rinishini o'zgartiradi.
  • Strukturalar: DOM elementlarini qo'shish, olib tashlash yoki manipulyatsiya qilish (*ngIf, *ngFor).
  • Atributlar: Mavjud elementning ko'rinishini yoki xatti-harakatini o'zgartiradi ([ngClass], [ngStyle]).
• Komponentlarning hayot aylanishi: Komponentning turli bosqichlarida kodni bajarishga imkon beradigan hooklar.
• NgZone: Asinxron operatsiyalar davomida avtomatik o'zgarishlarni aniqlash va ko'rinishni yangilash.

Ish jarayoni:

1. Yuklash: Ilova yuklanadi, Bootstrap moduli asosiy komponentni ishga tushiradi.
2. Render qilish: Angular shablonlarni kompilyatsiya qiladi va DOM tuzilishini yaratadi.
3. Ma'lumotlarni bog'lash: Ma'lumotlar va ko'rinish o'rtasida bog'lanish o'rnatiladi.
4. Voqealarni boshqarish: Voqealar tinglovchilari foydalanuvchi harakatlariga javob beradi.
5. O'zgarishlarni aniqlash: Zona asinxron operatsiyalarni kuzatadi.
6. Ko'rinishni yangilash: O'zgarishlar aniqlangach, Angular mos keladigan DOM qismlarini yangilaydi.

Ikki tomonlama ma'lumotlarni bog'lash misoli:

<!-- Shablonda -->
<input [(ngModel)]="userName">
<p>Salom, {{ userName }}!</p>

// Komponent sinfida
export class MyComponent {
  userName: string = '';
}