00 — Большая картина за 5 минут

Аналогия: Angular — это фабрика

Представь фабрику, которая из чертежа делает работающий механизм и потом следит, чтобы он крутился. У неё 4 цеха, и деталь (твой компонент) проходит их по очереди:

ТВОЙ КОД        →   1. КОМПИЛЯЦИЯ   →   2. СБОРКА   →   3. СТАРТ   →   4. РАБОТА
App.ts                 (перевод)          (упаковка)      (запуск)       (жизнь)
@Component{...}      шаблон → JS-функция  всё в main.js   рисует экран   реагирует на клики

Разберём каждый цех на пальцах.

Цех 1 — Компиляция: «перевод чертежа»

Ты пишешь шаблон на языке Angular ({{ count() }}, @if, @for, (click)). Браузер такого не понимает — он знает только JavaScript и DOM.

Компилятор (он работает на твоём компьютере при сборке, не в браузере) переводит шаблон в обычную JS-функцию. Эта функция умеет две вещи:

  • создать нужные HTML-элементы (первый раз);
  • обновить в них значения (когда данные поменялись).

Главное: к моменту, когда код попадёт в браузер, никаких @if/{{}} уже нет — есть готовая функция с инструкциями вроде «создай <p>, вставь сюда число».

Подробно → 01 — Компиляция.

Цех 2 — Сборка: «упаковка в коробку»

Твоё приложение — это сотни файлов (твои + Angular + библиотеки). Браузеру неудобно качать их по одному. Сборщик (esbuild/vite в v21) склеивает всё в несколько файлов (main.js), выкидывает лишнее и сжимает.

Бытовая аналогия: ты не носишь продукты из магазина по одному яблоку — складываешь в пакет и несёшь разом.

Подробно → 02 — Build.

Цех 3 — Старт (bootstrap): «включаем механизм»

Браузер загрузил main.js. Теперь нужно запустить приложение:

  1. найти на странице место <app-root></app-root>;
  2. создать твой класс App (через систему зависимостей — DI);
  3. вызвать ту самую функцию из цеха 1 в режиме «создать» → на экране появляются <h1>, <p>Счётчик: 0</p>, кнопка.

Это происходит один раз при загрузке страницы.

Подробно → 03 — Bootstrap.

Цех 4 — Работа (runtime): «жизнь механизма»

Экран нарисован. Дальше приложение просто ждёт событий. Ты жмёшь «+1»:

  1. вызывается inc() → count меняется с 0 на 1;
  2. Angular замечает, что count (сигнал) изменился, и планирует проверку;
  3. вызывается та же функция из цеха 1, но в режиме «обновить» → меняет 0 на 1 только там, где надо, не трогая остальное.

Подробно → 04 — Runtime и CD.

Весь путь нашего счётчика одной таблицей

Стадия Что происходит с count Что видно
Пишешь код count = signal(0) просто текст в App.ts
Компиляция {{ count() }} → инструкция «вставь число в <p>» JS-функция
Сборка функция попадает в main.js один файл
Старт функция в режиме «создать» рисует <p>Счётчик: 0</p> экран: 0
Клик +1 count стал 1 → проверка → режим «обновить» экран: 1

Два слова, которые надо запомнить сразу

  • Сигнал (signal) — это «коробочка со значением, за которой Angular следит». Поменял значение → Angular знает, что надо перерисовать связанное место.
  • Change detection (CD) — это и есть «проверить, что поменялось, и обновить экран». В v21 она запускается только когда реально что-то изменилось (сигнал, событие), а не постоянно. Это называется zoneless.

Дальше — медленно и с примерами. Начни с 01 — Компиляция.