Πώς λειτουργεί το 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 = '';
}