Angular кантип иштейт?

Angular MVC/MVVM архитектурасына негизделген. Ал компоненттерди, маалымат байланышын жана көзкарандылыктарды киргизүүнү колдонуп, интерактивдүү веб-колдонмолорду түзөт.

Негизги концепциялар:

• Компоненттер: Колдонмонун курулуш блоктору, алар шаблон, класс жана стилилерден турат.
• Модулдар (NgModules): Байланышкан компоненттерди, кызматтарды жана башка элементтерди чогултат.
• Маалымат байланышы: Модел жана көрүнүш ортосундагы маалыматтарды синхрондоштурат.
  • Бир тараптуу байланыш: Маалыматтар бир багытта агат (мисалы, моделден көрүнүшкө).
  • Көп тараптуу байланыш [()]: Моделде өзгөрүүлөр көрүнүшкө жана тескерисинче таасир этет.
• Кызматтар: Функционалдуулукту камсыздайт, аны ар кандай компоненттер колдонушу мүмкүн (мисалы, HTTP суроолор менен иштөө).
• Көзкарандылыктарды киргизүү (DI): Веб-элементтерге көзкарандылыктарды берүү механизми (мисалы, кызматтар).
• Шаблондар: Angular синтаксиси менен кеңейтилинген HTML, маалыматтарды көрсөтүү жана окуяларды иштетүү үчүн.
• Директивалар: DOM элементтеринин жүрүм-турумун жана көрүнүшүн өзгөртөт.
  • Структуралык: DOM элементтерин кошуу, алып салуу же башкаруу (мисалы, *ngIf, *ngFor).
  • Атрибуттук: Бар элементтин көрүнүшүн же жүрүм-турумун өзгөртөт (мисалы, [ngClass], [ngStyle]).
• Компоненттердин жашоо цикли: Компоненттин жашоо этаптарында кодду иштетүүгө мүмкүндүк берген хукалар.
• NgZone: автоматтык түрдө өзгөртүүлөрдү аныктоо жана көрүнүштү жаңыртуу үчүн асинхрондук операцияларда колдонулат.

Иш процесси:

1. Жүктөө: Колдонма жүктөлөт, Bootstrap модулу негизги компонентти ишке киргизет.
2. Рендеринг: Angular шаблондарды компиляциялайт жана DOM түзүмүн түзөт.
3. Маалымат байланышы: Маалыматтар жана көрүнүш ортосунда байланыш орнотулат.
4. Окуяларды иштетүү: Окуяларды угуучулар колдонуучунун аракеттерине жооп берет.
5. Өзгөртүүлөрдү аныктоо: Зона асинхрондук операцияларды көзөмөлдөйт.
6. Көрүнүштү жаңыртуу: Өзгөртүүлөр аныкталганда Angular тиешелүү DOM бөлүктөрүн жаңыртат.

Двойной байланын мисалы:

<!-- Шаблондо -->
<input [(ngModel)]="userName">
<p>Салам, {{ userName }}!</p>

// Компонент класында
export class MyComponent {
  userName: string = '';
}