Angular 21 на пальцах — простой vault

Это вторая, упрощённая версия конспектов. Та же тема, что и в ../v21/ («как Angular собирается, стартует и работает»), но объяснённая медленно, простыми словами, с аналогиями, примерами и анимациями.

Если хочешь точную версию с исходниками и file:line — иди в ../v21/. Этот vault — чтобы понять идею, а не запомнить имена функций.

Один пример на весь vault

Везде используется один и тот же крошечный компонент (это реальный apps/demo21):

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>Счётчик: {{ count() }}</p>
    <p>Удвоенный: {{ doubled() }}</p>
    <button (click)="inc()">+1</button>

    @if (count() > 2) {
      <p class="big">Больше двух!</p>
    }

    <ul>
      @for (n of items(); track n) {
        <li>{{ n }}</li>
      }
    </ul>
  `,
})
export class App {
  count = signal(0);                       // число, за которым следит Angular
  doubled = computed(() => this.count() * 2);   // само пересчитывается
  items = computed(() => Array.from({length: this.count()}, (_, i) => i + 1));
  inc() { this.count.update(c => c + 1); } // кнопка +1
}

Запомни его — дальше мы будем гонять именно этот счётчик по всем стадиям.

Порядок чтения (строго по шагам)

Читай сверху вниз — каждая глава опирается на предыдущую.

  1. 00 — Большая картина — 4 стадии за 5 минут. Аналогия фабрики.
  2. 01 — Компиляция — как твой HTML-шаблон превращается в JS-функцию.
  3. 02 — Build — зачем нужен сборщик и почему Angular ушёл на esbuild/vite.
  4. 03 — Bootstrap — как приложение запускается и рисует первый экран.
  5. 04 — Runtime и change detection — как клик по кнопке меняет цифру на экране.
  6. 05 — OnPush и zoneless — когда Angular проверяет компоненты, а когда нет.
  7. 06 — Что такое view, LView и TView — из чего «сделан» компонент в памяти.
  8. 07 — Как Angular находит селекторы — как он понимает, где какой компонент.
  9. 08 — Динамика и порталы — как контент появляется и переезжает на лету.
  10. 09 — DI на узлах — правда ли «инжектор на каждый элемент» и как inject() находит сервис.
  11. 10 — Встроенные директивы — @if/@for/@switch, ngTemplateOutlet, ngClass и компания.
  12. 11 — Жизненный цикл и afterRender — порядок хуков, afterNextRender/afterRenderEffect и фазы.
  13. 12 — Queries — как viewChild/contentChild находят элемент и когда результат готов.
  14. 13 — Content projection — <ng-content>: контент переезжает, а не копируется.
  15. 14 — Host bindings и host directives — управление своим тегом и «приклеивание» директив.
  16. 15 — Zoneless scheduler — что будит Angular и как из событий получается один tick.

В конце — огромная карта prosto.canvas: весь путь одним полотном с врезками-примерами.

Про «гифки»

Анимации лежат в assets/ как SVG и встроены прямо в главы — в Obsidian они проигрываются сами (это и есть «гифки», только лёгкие и без записи экрана). Плюс в тексте есть покадровые ASCII-анимации — читаешь сверху вниз как кадры.

Как читать карту в конце

Открой prosto.canvas в Obsidian. Поток идёт слева направо: код → компиляция → сборка → старт → работа. Снизу — карточки-файлы (эти же главы), сверху — врезки с мини-примерами. Стрелки показывают «что за чем».