Основы Angular в 2026: полный разбор для собеседований

Введение

Тема Angular на интервью не ограничивается вопросом "знаешь ли ты синтаксис". От кандидата обычно ждут понимания архитектуры: как устроено приложение, где хранится бизнес-логика, как работает change detection, как организованы формы, роутинг, HTTP и взаимодействие компонентов.

Ниже разбор в формате "вопрос -> практический ответ", чтобы материал работал и как база для junior, и как шпаргалка для middle.

Для углубления именно по механике обновления UI и стратегиям производительности продолжите с Angular Change Detection: как работает и что спрашивают на интервью.

Angular: база и архитектура

Что такое Angular и чем он отличается от AngularJS?

Angular (2+) - это современный framework на TypeScript для построения клиентских приложений. AngularJS (1.x) был на JavaScript, использовал другой шаблонный синтаксис и другую архитектурную модель.

Ключевые отличия:

• AngularJS: двусторонний биндинг "по умолчанию", digest cycle, контроллеры.
• Angular 2+: компонентная архитектура, TypeScript, RxJS, AOT-компиляция, улучшенная производительность и строгая модульность.

На интервью короткая формулировка: AngularJS и Angular - это разные поколения фреймворка, совместимости "из коробки" между ними нет.

Что такое SPA и как Angular помогает строить SPA?

SPA (Single Page Application) - приложение, где после первой загрузки переходы между экранами происходят без полной перезагрузки страницы.

Angular дает для этого:

• встроенный роутер;
• компонентную модель интерфейса;
• сервисы для данных;
• реактивные инструменты (RxJS) для асинхронных потоков;
• инструменты сборки и оптимизации.

Какие основные строительные блоки Angular-приложения?

Базовые блоки:

• компоненты (UI + логика представления);
• шаблоны (HTML с Angular-синтаксисом);
• директивы (поведение и структура в шаблоне);
• сервисы (бизнес-логика, работа с API, состояние);
• DI-контейнер (внедрение зависимостей);
• маршрутизация;
• формы;
• пайпы;
• модули или standalone-архитектура.

Что такое компонент в Angular?

Компонент - основной unit UI. Он состоит из:

• класса (TypeScript-логика);
• шаблона (разметка);
• стилей;
• метаданных (@Component).

Каждый компонент отвечает за конкретный кусок интерфейса и может быть переиспользован.

Что такое модуль (NgModule) и зачем он нужен?

NgModule группирует компоненты, директивы, пайпы и провайдеры в логические области приложения. Исторически это основной механизм организации Angular-приложения.

Сегодня с standalone-компонентами роль NgModule уменьшилась, но на старых и смешанных проектах он по-прежнему важен.

Что такое AppModule и AppComponent?

• AppModule - корневой модуль приложения (в классической архитектуре).
• AppComponent - корневой компонент, с которого начинается дерево UI.

Именно через корневой уровень Angular "бутстрапит" приложение.

Что такое декораторы в Angular?

Декораторы - это специальные TypeScript-метки, которые добавляют метаданные классам и полям:

• @Component
• @Injectable
• @Directive
• @Pipe
• @Input
• @Output

Они сообщают Angular, как обрабатывать класс или свойство.

Что такое метаданные (annotations) в контексте Angular?

Метаданные описывают конфигурацию сущности:

• селектор компонента;
• путь к шаблону;
• стили;
• список импортов/провайдеров;
• стратегию change detection.

Angular использует эти данные на этапе компиляции и рантайма.

Что такое шаблон (template) компонента?

Шаблон - это HTML с Angular-синтаксисом:

• интерполяция;
• биндинги;
• директивы;
• пайпы;
• обработчики событий.

Шаблон описывает, как UI зависит от состояния компонента.

Для чего нужен Angular CLI и какие задачи он решает?

Angular CLI - основной инструмент разработки:

• создание проекта и сущностей (component, service, pipe, guard);
• запуск dev-сервера;
• сборка production-бандла;
• линтинг;
• запуск тестов;
• генерация конфигов окружения.

На интервью полезно сказать: CLI стандартизирует архитектуру и ускоряет повседневные операции команды.

Шаблоны, биндинги, директивы

Что такое data binding в Angular и какие его виды существуют?

Data binding - механизм связи данных между классом компонента и шаблоном.

Основные виды:

• интерполяция {{ value }};
• property binding [prop]="value";
• event binding (event)="handler()";
• two-way binding [(ngModel)]="value".

Чем отличается интерполяция {{ }} от property binding [prop]?

• {{ }} вставляет значение как строку в текст шаблона.
• [prop] связывает значение с DOM-свойством элемента/компонента.

Пример:

<h1>{{ title }}</h1>
<button [disabled]="isLoading">Save</button>

Что такое event binding и приведите пример?

Event binding связывает DOM-событие с методом компонента.

<button (click)="onSave()">Save</button>

Когда пользователь кликает, вызывается onSave() в классе компонента.

Что такое two-way data binding и где используется ngModel?

Two-way binding объединяет чтение и запись в одном синтаксисе:

<input [(ngModel)]="name" />

ngModel чаще используется в template-driven формах. В reactive forms чаще работают через formControlName.

Что такое структурные директивы? Назовите самые популярные.

Структурные директивы изменяют структуру DOM:

• *ngIf
• *ngFor
• *ngSwitchCase / *ngSwitchDefault

Они добавляют или удаляют элементы из дерева.

Чем отличаются структурные директивы от атрибутных?

• Структурные: меняют структуру (*ngIf, *ngFor).
• Атрибутные: меняют поведение/стиль существующего элемента ([ngClass], [ngStyle]).

Что такое встроенные директивы *ngIf, *ngFor, *ngSwitch и когда их использовать?

• *ngIf - условный рендер.
• *ngFor - рендер списка.
• *ngSwitch - ветвление по значению, когда условий больше двух и нужна читабельность.

Что такое пайпы (pipes) в Angular и для чего они нужны?

Пайпы преобразуют данные в шаблоне без изменения исходного значения:

• date
• currency
• uppercase
• json

Они улучшают читаемость шаблона и выносят форматирование из HTML-логики.

Как создать свой кастомный pipe?

Нужно создать класс с @Pipe и реализовать PipeTransform.

@Pipe({ name: "shortName" })
export class ShortNamePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return "";
    return value.length > 12 ? `${value.slice(0, 12)}...` : value;
  }
}

Что такое template reference variable (#var) и как её использовать?

Это ссылка на элемент или директиву в шаблоне:

<input #emailInput />
<button (click)="send(emailInput.value)">Send</button>

Удобно для простых UI-кейсов без отдельного state.

Компоненты и взаимодействие между ними

Как передать данные из родительского компонента в дочерний (@Input)?

Родитель передает значение через binding:

<app-user-card [user]="selectedUser"></app-user-card>

В дочернем компоненте:

@Input() user!: User;

Как передать событие из дочернего компонента в родительский (@Output и EventEmitter)?

Дочерний компонент эмитит событие:

@Output() saved = new EventEmitter<User>();

onSave() {
  this.saved.emit(this.user);
}

Родитель подписывается:

<app-editor (saved)="handleSaved($event)"></app-editor>

В чём разница между constructor и ngOnInit в компоненте?

• constructor - для DI и базовой инициализации класса.
• ngOnInit - lifecycle hook после установки @Input, место для стартовой логики компонента.

Типичный ответ на интервью: тяжелую бизнес-инициализацию лучше делать в ngOnInit, а не в constructor.

Перечислите основные lifecycle hooks компонента и объясните порядок их вызова.

Часто используемые:

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Порядок первой инициализации: ngOnChanges -> ngOnInit -> ngDoCheck -> hooks content/view -> далее циклы checked -> при удалении ngOnDestroy.

В чём разница между ngOnChanges и ngDoCheck?

• ngOnChanges срабатывает при изменении @Input (с SimpleChanges).
• ngDoCheck вызывается на каждом цикле проверки и подходит для кастомной логики детекта изменений.

ngDoCheck мощный, но дорогой при злоупотреблении.

Какие способы общения компонентов между собой вы знаете (parent-child, sibling, сервисы, router)?

Основные варианты:

• parent -> child: @Input;
• child -> parent: @Output;
• sibling: через общего родителя или shared service;
• дальняя связь: сервис + RxJS Subject/BehaviorSubject;
• router state/query params для экранных сценариев.

Что такое content projection и для чего используется <ng-content>?

Content projection позволяет вставлять внешний контент внутрь компонента-обертки.

Пример: универсальный CardComponent, куда передается произвольное содержимое.

<app-card>
  <h3>Title</h3>
  <p>Body</p>
</app-card>

Внутри app-card:

<div class="card">
  <ng-content></ng-content>
</div>

Для чего используются декораторы @ViewChild и @ViewChildren?

Они дают доступ к дочерним элементам/компонентам из класса:

• @ViewChild - один экземпляр;
• @ViewChildren - коллекция.

Используют для интеграции с DOM/API, вызова методов child-компонента, работы с QueryList.

Как реализовать динамическое создание компонентов во время выполнения?

Через ViewContainerRef и createComponent:

1. подготовить контейнер в шаблоне;
2. получить ViewContainerRef;
3. динамически создать компонент и передать ему входные данные.

Этот подход полезен для плагинной архитектуры, модалок, динамических дашбордов.

Что такое standalone-компоненты и чем они отличаются от компонентов в NgModule?

Standalone-компонент объявляется с standalone: true и сам указывает нужные импорты.

Плюсы:

• меньше boilerplate;
• проще локальная композиция;
• удобнее lazy loading.

В отличие от классической схемы, компонент не обязан быть объявлен в NgModule.

Сервисы, DI, HTTP

Что такое сервис (service) в Angular и для чего он нужен?

Сервис - класс для переиспользуемой логики вне UI:

• API-запросы;
• бизнес-правила;
• кэш;
• работа с состоянием;
• утилиты уровня приложения.

Как устроена система Dependency Injection в Angular?

Angular использует иерархический инжектор:

• зависимости регистрируются в провайдерах;
• компонент/сервис запрашивает зависимость в constructor;
• DI-контейнер выдает экземпляр по области видимости.

Это уменьшает связность и облегчает тестирование.

Что означает providedIn: 'root' и какие есть варианты предоставления сервисов?

providedIn: 'root' означает singleton в корневом инжекторе всего приложения.

Другие варианты:

• providedIn: 'platform';
• providedIn: 'any' (отдельные экземпляры в lazy-инжекторах);
• явная регистрация в providers компонента/модуля.

Как правильно выносить бизнес-логику из компонентов в сервисы?

Практический подход:

• компонент отвечает за отображение и orchestration UI;
• сервисы отвечают за доменную логику и работу с данными;
• тяжелые цепочки RxJS и маппинг DTO лучше держать в сервисном слое.

Так код проще переиспользовать и покрывать тестами.

Как в Angular выполнять HTTP-запросы (какой модуль и какой сервис используются)?

Через HttpClient из @angular/common/http. Он возвращает Observable, что удобно для реактивных цепочек и отмены через RxJS-операторы.

Что такое HttpClientModule и как его подключить?

Исторически подключается в модуле:

imports: [HttpClientModule]

В современной standalone-конфигурации чаще используют провайдеры (provideHttpClient).

Что такое HTTP-интерцептор в Angular и для чего он используется?

Интерцептор перехватывает HTTP-запросы/ответы в одном месте.

Типовые задачи:

• добавление токена;
• глобальное логирование;
• единая обработка ошибок;
• retry/timeout-политики;
• трансформация запросов.

Как обрабатывать ошибки HTTP-запросов в Angular?

Уровни обработки:

• локально в сервисе/компоненте (catchError);
• глобально через интерцептор;
• UI-обработка: ошибки для пользователя, fallback-состояние.

Хорошая практика: не глотать ошибку молча, а возвращать структурированный error-state.

Формы и валидация

Чем отличаются шаблонные формы (template-driven) от реактивных (reactive forms)?

Template-driven:

• проще для маленьких форм;
• логика больше в шаблоне;
• меньше контроля для сложных кейсов.

Reactive forms:

• модель формы в TypeScript;
• точный контроль валидации и динамики;
• удобнее масштабируются в enterprise-формы.

Как создать простую реактивную форму с FormGroup и FormControl?

form = new FormGroup({
  email: new FormControl("", { nonNullable: true }),
  password: new FormControl("", { nonNullable: true }),
});

В шаблоне:

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" />
  <input type="password" formControlName="password" />
  <button type="submit">Login</button>
</form>

Как реализовать синхронную и асинхронную валидацию форм?

Синхронная:

• Validators.required
• Validators.email
• кастомный validator function.

Асинхронная:

• функция, возвращающая Observable<ValidationErrors | null>;
• например, проверка уникальности email через API.

Как получить и показать пользователю ошибки валидации поля?

Проверяют состояние контрола:

• invalid
• touched
• dirty
• errors

Пример:

<small *ngIf="emailCtrl.touched && emailCtrl.errors?.['required']">
  Email обязателен
</small>

Маршрутизация и модули

Как работает маршрутизация в Angular и что такое RouterModule?

RouterModule связывает URL с компонентами и управляет навигацией без перезагрузки страницы.

Базовые элементы:

• конфиг Routes;
• router-outlet;
• routerLink;
• ActivatedRoute для параметров.

Как настроить child routes и зачем они нужны?

Child routes описывают вложенные экраны внутри родительского layout.

Зачем:

• структурировать сложные разделы;
• переиспользовать общий контейнер;
• управлять вложенной навигацией.

Что такое lazy loading модулей и как его настроить в Angular?

Lazy loading откладывает загрузку части приложения до момента, когда пользователь реально туда заходит.

Обычно настраивается через loadChildren (или loadComponent для standalone).

Плюс: меньше initial bundle, быстрее первый рендер.

Что такое guard’ы (CanActivate, CanDeactivate и др.) и когда их применять?

Guards - это "контрольные точки" перед переходом:

• CanActivate - можно ли войти на маршрут;
• CanDeactivate - можно ли уйти со страницы;
• CanMatch/CanLoad - контроль загрузки маршрута.

Типичный кейс: защита приватных роутов, предупреждение о несохраненной форме.

RxJS, change detection, производительность

Что такое Observable и чем он отличается от Promise в Angular?

Promise:

• одно значение;
• нельзя отменить напрямую;
• eager в типичном использовании.

Observable:

• поток значений во времени;
• можно комбинировать операторами;
• можно отписаться/отменить;
• естественно интегрирован с Angular HTTP и шаблонами.

Для чего используют async pipe в шаблоне и какие преимущества он даёт?

async pipe:

• автоматически подписывается на Observable/Promise;
• отписывается при уничтожении компонента;
• упрощает шаблон;
• уменьшает риск утечек при ручных подписках.

Пример:

<div *ngIf="user$ | async as user">
  {{ user.name }}
</div>

Что такое стратегия обнаружения изменений ChangeDetectionStrategy.OnPush и когда её стоит использовать?

OnPush уменьшает число проверок и делает компонент более предсказуемым по обновлениям.

Компонент обновляется, когда:

• меняется ссылка входного @Input;
• происходит событие в компоненте;
• эмитится новое значение в async pipe;
• вызывается ручной триггер (markForCheck).

Использовать стоит в средних и больших приложениях, особенно в списках и тяжелых UI-блоках.

Какие основные подходы вы используете для оптимизации производительности Angular-приложения (lazy loading, OnPush, trackBy, разделение модулей и т.п.)?

Практичный набор:

• lazy loading маршрутов/фич;
• ChangeDetectionStrategy.OnPush;
• trackBy в *ngFor;
• декомпозиция тяжелых экранов;
• ограничение глобального state churn;
• использование async pipe вместо лишних ручных подписок;
• кэширование в сервисах;
• вынос тяжелой логики из шаблонов;
• правильная стратегия preloading для роутов;
• bundle-анализ и контроль зависимостей.

На интервью сильный ответ всегда включает: "сначала измеряем, потом оптимизируем". Без профилирования любые "ускорения" могут быть случайными.

Частые ошибки на Angular-интервью

• Пересказывают API, но не могут объяснить архитектурные границы.
• Путают template-driven и reactive формы на уровне практики.
• Не понимают, как работает DI-скоуп сервиса.
• Не умеют объяснить разницу Promise vs Observable в реальном коде.
• Путают OnPush и "полное отключение изменений".
• Не знают, как избежать утечек подписок.

Как отвечать на Angular-собеседовании уверенно

Рабочая схема:

1. Дать короткое определение.
2. Показать практический пример.
3. Назвать типичный риск/ошибку.
4. Объяснить, как вы это решаете в проекте.

Например, для OnPush:

"Это стратегия change detection, где Angular реже проверяет компонент. Она полезна для производительности, но требует иммутабельных обновлений и корректной работы с потоками. Я обычно использую ее вместе с async pipe и trackBy в списках."

Итоги

Angular в 2026 требует не только знания синтаксиса, но и понимания архитектуры: как связаны компоненты, сервисы, DI, роутинг, формы и реактивные потоки.

Для junior важна уверенная база по шаблонам, компонентам, сервисам и роутеру.

Для middle критична глубина: change detection, RxJS-пайплайны, границы ответственности, производительность и зрелая аргументация технических решений.