Как работает Angular?

Angular работает как фреймворк для создания одностраничных приложений (SPA). Его ключевые компоненты и принципы:

• Модульность: Приложения строятся из модулей. @NgModule определяет, какие компоненты, сервисы и другие элементы принадлежат модулю.
• Компоненты: Основные строительные блоки Angular-приложений. Каждый компонент состоит из шаблона (HTML), класса TypeScript (логика) и стилей (CSS). Component декоратор связывает их вместе.
• Привязка данных (Data Binding): Angular обеспечивает связь между данными в классе компонента и представлением в шаблоне. Существуют односторонняя (property binding, interpolation) и двухсторонняя привязка данных (ngModel).
• Директивы: Изменяют поведение или внешний вид элементов DOM. Бывают структурные (*ngIf, *ngFor) и атрибутные (ngClass, ngStyle).
• Сервисы: Классы, содержащие логику, которая может быть использована несколькими компонентами. Используются для получения данных, бизнес-логики и т.д.
• Внедрение зависимостей (Dependency Injection): Механизм, с помощью которого Angular предоставляет сервисы компонентам или другим сервисам. Позволяет делать код более гибким и тестируемым.
• Роутинг (Routing): Позволяет навигировать между различными представлениями (компонентами) приложения без перезагрузки страницы. Определяется с помощью RouterModule и конфигурации маршрутов.
• Жизненный цикл компонента (Component Lifecycle): Серия событий, происходящих с компонентом от момента создания до уничтожения. Angular предоставляет хуки (методы), которые можно реализовать для выполнения действий на определенных этапах (например, ngOnInit, ngOnDestroy).
• Изменение обнаружения (Change Detection): Механизм, который определяет, когда нужно обновить представление (DOM) на основе изменений в данных приложения. Angular использует зоны (NgZone) для отслеживания асинхронных событий и автоматического запуска обнаружения изменений.
• Шаблоны (Templates): HTML с расширениями Angular для привязки данных, директив и выражений.
• RxJS: Angular активно использует библиотеку RxJS для работы с асинхронными данными и потоками событий.

Процесс работы высокоуровнево:

1. Загрузка: Браузер загружает index.html.
2. Старт: Запускается корень приложения, обычно находящийся в main.ts.
3. Бутстрап: @NgModule для корневого модуля (обычно AppModule) загружается с помощью platform-browser.
4. Рендеринг: Angular создает и рендерит компоненты, начиная с корневого.
5. Привязка данных: Данные из классов компонентов связываются с шаблонами.
6. Обнаружение изменений: Angular мониторит изменения данных и обновляет представление.
7. Роутинг: Переходы между представлениями обрабатываются роутером.

// Пример простого компонента
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Имя тега для использования в шаблоне
  template: `<p>{{ message }}</p>`, // Шаблон компонента
  styles: ['p { color: blue; }'] // Стили компонента
})
export class GreetComponent {
  // Логика компонента
  message = 'Привет от Angular!';
}

// Пример использования сервиса с DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Сервис доступен в корневом инжекторе
})
export class DataService {
  getData(): string {
    return 'Данные из сервиса';
  }
}

// В компоненте, который использует сервис
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Внедрение сервиса
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular компилирует TypeScript и HTML-шаблоны в JavaScript в процессе сборки (AOT compilation по умолчанию), что повышает производительность.