Что такое Angular и зачем он нужен

Angular — это не библиотека, а целый завод по сборке больших веб-приложений: с правилами, инструментами и архитектурой из коробки.

«Библиотека даёт кирпичи. Фреймворк даёт кирпичи, чертёж дома и инспектора, который не пустит вас жить в кривой постройке».

Когда вы открываете любой крупный банковский кабинет, корпоративную CRM или панель управления облаком — велик шанс, что под капотом работает Angular. Это фреймворк от Google для построения одностраничных приложений (SPA), где интерфейс не перезагружается целиком, а перерисовывает только то, что изменилось. В отличие от React, который даёт вам только слой представления и оставляет выбор маршрутизатора, форм и HTTP на ваше усмотрение, Angular приходит «батарейками в комплекте»: роутер, формы, HTTP-клиент, система внедрения зависимостей и инструмент сборки — всё официальное и согласованное между собой.

Эта особенность определяет, кому Angular подходит. Если вы пишете лендинг или маленький виджет — он избыточен. Но как только над проектом работают десятки разработчиков годами, единые правила становятся спасением: новый человек в команде открывает любой модуль и видит знакомую структуру. Angular написан на TypeScript — надстройке над JavaScript со статической типизацией, что ловит ошибки ещё до запуска кода.

В этом курсе мы идём по современному Angular версии 19: standalone-компоненты по умолчанию (без устаревших NgModule), реактивность на сигналах и новый синтаксис управления потоком @if / @for. Это тот Angular, который пишут в 2025 году, а не код из старых туториалов.

Стоит сразу прояснить экосистему, потому что вокруг Angular много слов. TypeScript — язык, на котором вы пишете. Angular CLI — утилита, которая создаёт и собирает проект. RxJS — библиотека потоков данных, которую Angular использует для асинхронных операций (например, HTTP). Сигналы — новая система реактивности, постепенно вытесняющая часть RxJS в управлении состоянием. Не пугайтесь объёма: вы не обязаны знать всё сразу, и курс вводит эти кусочки по очереди, ровно когда они понадобятся.

Полезно понимать и историю. Первый Angular (он же AngularJS, версия 1) был совсем другим фреймворком; современный Angular переписан с нуля начиная со второй версии и с тех пор выходит большими релизами примерно дважды в год. Версии 17, 18 и 19 принесли тихую революцию: standalone-компоненты вместо громоздких NgModule, встроенный control flow вместо структурных директив и сигналы вместо ручных подписок. Если вы встретите старый код с @NgModule и *ngFor — он рабочий, но это уходящая эпоха, и в новых проектах так уже не пишут.

Как работает под капотом

Любое Angular-приложение — это дерево компонентов. На вершине стоит корневой компонент (обычно AppComponent), внутри него вложены другие, внутри них — ещё. Браузер видит ваши кастомные теги вроде <app-header>, а Angular подменяет их реальной разметкой. Фреймворк отслеживает изменения данных и обновляет DOM точечно — этот процесс называется change detection, и про него мы поговорим отдельно.

  Браузер (index.html)
        |
        v
  <app-root>  ........  AppComponent (корень)
     |             v         v
  <app-header>  <app-product-list>
                      |
                      v
                 <app-product-card> (x N)

Каждый прямоугольник — это отдельный класс на TypeScript со своим шаблоном (HTML), стилями (CSS) и логикой. Дерево компонентов — главная ментальная модель Angular: данные обычно текут вниз (родитель передаёт ребёнку), а события всплывают вверх (ребёнок уведомляет родителя).

Частые ошибки

• Тянуть Angular в крошечный проект. Порог входа высок; для простой страницы хватит ванильного JS или лёгкой библиотеки.
• Учить по старым статьям. Туториалы 2018–2021 годов полны NgModule, *ngIf и RxJS-обвязки там, где сегодня хватает сигналов. Проверяйте версию.
• Игнорировать TypeScript. Попытки писать «как на JS», заливая всё типом any, убивают главное преимущество — раннюю проверку ошибок.

Best practices

• Начинайте новые проекты на standalone-компонентах — это официальный путь с Angular 17+.
• Держите компоненты маленькими: один компонент — одна ответственность.
• Используйте Angular CLI для генерации файлов, чтобы структура была единообразной.

Итоги. Angular — мощный «всё-в-одном» фреймворк для крупных приложений на TypeScript. Его сила в единых правилах и богатой экосистеме, цена — высокий порог входа. Дальше мы поставим окружение и соберём первое приложение.

Закрепляем

Прежде чем двигаться дальше, удержите в голове три якоря. Первый: Angular — фреймворк, а не библиотека, поэтому он диктует архитектуру и приносит готовые инструменты. Второй: всё приложение — это дерево компонентов, где данные текут вниз, а события всплывают вверх. Третий: вы пишете на TypeScript, и статическая типизация — ваш союзник, а не помеха. Эти три идеи будут повторяться в каждом следующем уроке, обрастая деталями.

Полезно сравнить Angular с соседями по цеху. React гибче и легче на старте, но требует самостоятельно собирать стек из десятка библиотек. Vue — золотая середина по сложности. Angular выигрывает там, где важны единые правила на годы и большую команду: банки, телеком, корпоративные порталы. Выбор фреймворка — это не вопрос «что лучше вообще», а «что лучше для этой задачи и этой команды». Для крупного долгоживущего продукта строгость Angular превращается из обузы в преимущество.