Фронтенд-разработчик Angular (Профессиональный уровень)

Что такое Angular и как он отличается от AngularJS?
Angular — это платформа для разработки одностраничных приложений на TypeScript. В отличие от AngularJS, который был JavaScript-фреймворком, Angular использует компонентно-ориентированную архитектуру, поддерживает современные стандарты, строгую типизацию и модульность.

Объясните концепцию компонентов в Angular.
Компонент — это основной строительный блок Angular-приложения. Он состоит из класса с декоратором @Component, шаблона и стилей. Компонент управляет частью пользовательского интерфейса и содержит связанную логику.

Что такое директивы в Angular и какие их виды существуют?
Директивы — это инструкции, изменяющие поведение или внешний вид DOM-элементов. Существует три типа: компоненты (директивы с шаблоном), атрибутные директивы (изменяют внешний вид/поведение элемента) и структурные директивы (изменяют структуру DOM).

Что такое сервисы в Angular и как они создаются?
Сервисы — это классы, содержащие бизнес-логику, данные или функционал, который может использоваться несколькими компонентами. Они создаются через CLI команду ng generate service и помечаются декоратором @Injectable().

Как работает Dependency Injection (DI) в Angular?
Dependency Injection — это механизм предоставления зависимостей объекту извне. Angular имеет встроенный DI, позволяющий внедрять зависимости через конструктор компонента, сервиса или директивы. Это упрощает тестирование и делает код более гибким и переиспользуемым.

Что такое пайпы в Angular и как их использовать?
Пайпы преобразуют значения в шаблонах перед отображением. Например, даты, числа, строки. Пример использования: {{ today | date }}. Пользовательские пайпы создаются с помощью @Pipe.

Что такое Input и Output в Angular и как они используются?
@Input используется для передачи данных от родителя к дочернему компоненту. @Output применяется для отправки событий из дочернего компонента к родителю, обычно через EventEmitter.

Охарактеризуйте работу Angular Router.
Angular Router — это встроенная система маршрутизации для создания SPA. Поддерживает lazy loading, параметры маршрутов, защиту маршрутов через CanActivate, вложенные маршруты и другие продвинутые возможности.

Что такое жизненный цикл компонента в Angular и какие хуки доступны?
Каждый компонент проходит через несколько этапов жизненного цикла. Основные хуки: ngOnChanges — при изменении входных свойств, ngOnInit — инициализация, ngDoCheck — пользовательская проверка изменений, ngAfterContentInit, ngAfterViewInit и другие.

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

Объясните работу Change Detection в Angular.
Change Detection — это механизм, который отслеживает изменения в модели и обновляет представление. По умолчанию используется "проверка всех связанных компонентов". Можно переключить режим на OnPush для ручного управления.

Что такое RxJS и как он используется в Angular?
RxJS — это библиотека реактивного программирования, основанная на Observables. В Angular активно используется для работы с HTTP-запросами, формами, маршрутизацией и другими асинхронными операциями.

Как реализовать взаимодействие между несвязанными компонентами?
Можно использовать сервисы с Subject/Observable, Ngrx/Redux для глобального состояния, EventEmitter и ViewChild (для прямой связи), сообщения через Broadcast.

Что такое HttpClient и как он используется в Angular?
HttpClient — это модуль Angular, предоставляющий удобный API для выполнения HTTP-запросов. Поддерживает Observables, interceptors, типизированные ответы, заголовки и другие возможности.

Что такое HTTP Interceptors и как они работают?
HTTP Interceptor — это механизм перехвата и изменения HTTP-запросов и ответов. Используется для добавления токена авторизации, логгирования, обработки ошибок и других задач.

Что такое Reactive Forms и как они отличаются от Template-driven?
Reactive Forms — это подход к работе с формами через программное создание контролов с использованием FormControl, FormGroup, FormArray. Они более предсказуемы, легко тестируются и масштабируются, чем Template-driven формы.

Что такое NgModule и зачем он нужен?
NgModule — это метаданный класс, организующий код Angular-приложения в логические блоки. Он объявляет компоненты, директивы, пайпы, импортирует и экспортирует модули, предоставляет сервисы.

Что такое Lazy Loading в Angular и как его реализовать?
Lazy Loading — это загрузка модулей по требованию. Реализуется через маршрутизатор, указывая loadChildren вместо children. Улучшает начальную загрузку приложения и снижает размер бандла.

Что такое Pipes Pure и Impure и в чём разница?
Pure Pipe — выполняется только при изменении примитивного значения или ссылки на объект. Impure Pipe — запускается при каждом цикле change detection. Pure быстрее, Impure мощнее, но менее производителен.

Что такое ViewEncapsulation и какие значения она принимает?
ViewEncapsulation определяет, как стили компонента изолируются. Возможные значения: Emulated (по умолчанию), Native (Shadow DOM), None (глобальные стили). Выбор влияет на область применения CSS.

Что такое ViewChild и ContentChild и в чём разница?
@ViewChild получает дочерние элементы из шаблона текущего компонента. @ContentChild получает элементы, переданные через ng-content. Используются для прямого доступа к элементам или компонентам.

Что такое Renderer2 и зачем он нужен?
Renderer2 — это абстракция Angular для безопасной манипуляции DOM. Обеспечивает кросс-платформенную совместимость (например, SSR, Web Workers) и избегает прямой работы с DOM API.

Что такое AOT и JIT и в чём разница?
AOT (Ahead-of-Time) — компиляция шаблонов на этапе сборки. JIT (Just-in-Time) — компиляция во время выполнения. AOT даёт лучшую производительность, меньше размер приложения, лучше SEO.

Что такое Angular CLI и какие команды вы знаете?
Angular CLI — это инструмент командной строки для создания проектов, компонентов, сервисов и других частей приложения. Примеры команд: ng new, ng generate component, ng serve, ng build, ng test.

Что такое Ivy и как он влияет на Angular?
Ivy — это новое поколение компилятора Angular. Он уменьшает размер приложения, ускоряет сборку, улучшает диагностику и позволяет компилировать компоненты по отдельности. Является стандартным начиная с Angular 9.

Что такое директива *ngIf и как она работает?
*ngIf — это структурная директива, которая добавляет или удаляет элемент из DOM в зависимости от результата выражения. Если значение истинно, элемент отображается, если ложно — убирается из разметки полностью.

В чём разница между *ngIf и [hidden]?
*ngIf полностью удаляет элемент из DOM при ложном условии, а [hidden] просто скрывает его с помощью CSS-свойства display: none. При использовании [hidden] элемент остаётся в DOM, но невидим для пользователя.

Что такое *ngFor и какие у него возможности?
*ngFor — это структурная директива, используемая для итерации по массивам или спискам и отображения элементов шаблона для каждого элемента коллекции. Поддерживает индекс, проверку на первый/последний элемент и другие параметры.

Как использовать асинхронные пайпы в Angular?
AsyncPipe позволяет подписываться на Observable или Promise прямо в шаблоне. Он автоматически обрабатывает выделение и освобождение ресурсов. Например: {{ observableData | async }}.

Что такое HostBinding и HostListener и как их использовать?
@HostBinding связывает свойство компонента или директивы со свойством хост-элемента (например, стилем или атрибутом). @HostListener позволяет реагировать на события хост-элемента, например, клик или наведение мыши.

Что такое ContentChild и ContentChildren и в чём их отличие?
@ContentChild получает один дочерний элемент, переданный через ng-content. @ContentChildren делает то же самое, но собирает все подходящие элементы в QueryList. Используются внутри AfterContentInit и других post-content хуков.

Что такое ViewChild и ViewChildren и как они работают?
@ViewChild используется для получения ссылки на дочерний элемент или компонент, определённый в шаблоне. @ViewChildren собирает несколько таких элементов в QueryList. Доступ к ним возможен после хука AfterViewInit.

Как реализовать пользовательскую директиву в Angular?
Для создания пользовательской директивы используется CLI команда ng generate directive. Затем директива реализуется через декоратор @Directive и может изменять поведение или внешний вид элемента, например, добавлять классы или обработчики событий.

Что такое интерфейс OnInit и когда он используется?
OnInit — это жизненный цикл компонента, который вызывается один раз после инициализации входных свойств. Чаще всего используется для инициализации данных, подписок, запросов к API.

Как работает ngOnDestroy и в каких случаях его стоит использовать?
ngOnDestroy вызывается перед уничтожением компонента. Его рекомендуется использовать для отписки от Observables, удаления таймеров, очистки ресурсов, чтобы избежать утечек памяти.

Что такое Input и Output в контексте взаимодействия компонентов?
@Input используется для передачи данных от родителя к дочернему компоненту. @Output применяется для отправки событий из дочернего компонента вверх по иерархии, обычно через EventEmitter.

Как организовать глобальное состояние в Angular без Ngrx?
Можно использовать сервисы с Subject или BehaviorSubject, которые хранят данные и предоставляют их всем компонентам через Dependency Injection. Это простой способ управления состоянием без использования Redux-подхода.

Что такое HttpClientTestingModule и как он используется в тестировании?
HttpClientTestingModule — это модуль Angular для тестирования HTTP-запросов. Позволяет мокать ответы сервера, проверять вызовы, не отправляя реальных запросов. Обычно используется вместе с TestBed и HttpTestingController.

Как протестировать компонент с помощью Jasmine и TestBed?
TestBed создаёт среду тестирования для компонента. Можно создать экземпляр компонента, проверить его свойства, методы, шаблон, а также сымитировать изменения и события. Jasmine предоставляет ожидания и утверждения.

Что такое TestBed и зачем он нужен?
TestBed — это утилита Angular, которая предоставляет возможность создавать и настраивать тестовые модули для компонентов, сервисов и директив. Позволяет имитировать окружение приложения во время unit-тестирования.

Что такое RouterTestingModule и как его использовать?
RouterTestingModule — это модуль Angular, заменяющий настоящий маршрутизатор для целей тестирования. Позволяет тестировать маршруты, активные ссылки, навигацию, не выполняя реального перехода между страницами.

Как использовать ActivatedRoute в тестах?
В тестах можно подменить ActivatedRoute с помощью мока или специального TestModule. Часто используются Subject или моки с вручную заданными параметрами, queryParams, snapshot и другими данными.

Что такое интерсепторы HTTP и как они помогают в работе с API?
HTTP Interceptor — это механизм перехвата и изменения HTTP-запросов и ответов. Полезен для добавления заголовков, обработки ошибок, логгирования, кэширования и других задач, связанных с сетевыми операциями.

Как реализовать защиту маршрутов в Angular?
Защита маршрутов реализуется через CanActivate, CanDeactivate, Resolve и другие guard-интерфейсы. Наиболее распространённый — CanActivate, который определяет, может ли пользователь перейти по маршруту (например, проверяет авторизацию).

Что такое Resolver и зачем он нужен в маршрутизации?
Resolver — это механизм предварительной загрузки данных перед активацией маршрута. Позволяет получить данные до того, как компонент будет создан, что улучшает UX и позволяет избежать отображения пустых экранов.

Как реализовать переадресацию после навигации?
Переадресация на другой маршрут реализуется через метод navigate() или navigateByUrl() у Router. Также можно указывать redirectTo в маршруте, например, для 404 страниц или корневого маршрута.

Что такое ViewChild с { read: ... } и как его использовать?
При использовании ViewChild можно указать опцию read, чтобы получить не только DOM-элемент, но и конкретный токен, например, ElementRef, ViewContainerRef или даже собственный сервис. Это расширяет возможности доступа к элементам.

Что такое Renderer2 и почему он предпочтительнее прямой работы с DOM?
Renderer2 — это абстракция Angular для безопасного и кросс-платформенного взаимодействия с DOM. Он обеспечивает совместимость с SSR, Web Workers и другими окружениями, где прямой доступ к DOM запрещён или ограничен.

Как использовать TranslateService в Angular для многоязычности?
TranslateService — часть библиотеки ngx-translate, используется для реализации многоязычного интерфейса. Позволяет загружать JSON-файлы с переводами, менять язык динамически и использовать пайпы и методы для вывода текста.

Что такое Ivy и какие преимущества он даёт?
Ivy — это новое поколение компилятора Angular. Основные преимущества: уменьшение размера приложений, ускорение сборки, улучшенная диагностика, лучшая поддержка Tree-shaking и возможность частичной компиляции компонентов. Стандарт начиная с Angular 9.

Что такое ViewChild и когда он становится доступным?
ViewChild становится доступным после хука AfterViewInit. Он позволяет получить прямой доступ к дочернему элементу, компоненту или директиве из шаблона.

Как работает механизмы обнаружения изменений (Change Detection) в Angular?
Change Detection отслеживает изменения в данных и обновляет представление при их изменении. Angular использует дерево компонентов и проверяет значения свойств при каждом событии (например, клик, HTTP-ответ). Можно настроить режим OnPush для более эффективной проверки.

В чём разница между @Input() и @Output() в контексте взаимодействия между компонентами?
@Input() используется для передачи данных от родителя к дочернему компоненту, а @Output() — для отправки событий от дочернего компонента к родителю через EventEmitter.

Что такое ContentChild и когда он инициализируется?
ContentChild ссылается на элемент, который был передан внутрь компонента через <ng-content>. Доступ к нему становится возможным после вызова хука AfterContentInit.

Что такое Observables и как они используются в Angular?
Observables — это реализация паттерна "наблюдатель" из RxJS. Они используются в Angular для обработки асинхронных операций, таких как HTTP-запросы, маршрутизация, формы и события пользовательского интерфейса.

Как подписаться на Observable и что нужно сделать, чтобы избежать утечек памяти?
Подписка выполняется через метод .subscribe(). Чтобы избежать утечек, необходимо отписываться при помощи unsubscribe(), использовать takeUntil, async pipe или другие механизмы автоматического управления жизненным циклом подписки.

Что такое Subject и чем он отличается от Observable?
Subject — это особый тип Observable, который позволяет рассылать данные всем подписчикам. В отличие от обычного Observable, Subject является "горячим", то есть может активно управлять потоком данных.

Что такое BehaviorSubject и в каких случаях его стоит использовать?
BehaviorSubject — это тип Subject, который всегда имеет текущее значение и передаёт его новым подписчикам. Часто используется для хранения состояния, например, данных пользователя или темы приложения.

Что такое HttpClient и какие основные методы он предоставляет?
HttpClient — это модуль Angular для работы с HTTP-запросами. Основные методы: get(), post(), put(), delete(), patch(). Поддерживает типизированные запросы, interceptors и работу с Observables.

Что такое HTTP Interceptor и как его создать?
HTTP Interceptor — это механизм перехвата и изменения HTTP-запросов и ответов. Создаётся с помощью CLI команды или вручную через класс, реализующий HttpInterceptor. Используется для добавления заголовков, логгирования, обработки ошибок и т.д.

Что такое Reactive Forms и как они создаются?
Reactive Forms — это подход к работе с формами через программное создание контролов. Используются классы FormControl, FormGroup, FormArray. Формы создаются в коде и связываются со шаблоном через директивы.

Что такое FormBuilder и зачем он нужен?
FormBuilder — это сервис Angular, позволяющий быстрее создавать формы, используя методы group(), control(), array(). Упрощает синтаксис создания FormGroup и FormControl.

Что такое Validators и как они применяются в формах?
Validators — это функции, проверяющие корректность ввода данных в форме. Применяются к FormControl через массив валидаторов. Могут быть встроенными (required, minLength) или кастомными.

Что такое Template-driven формы и как они работают?
Template-driven формы создаются непосредственно в шаблоне с использованием директив ngModel и ngForm. Angular сам создаёт модель формы на основе этих директив. Подходят для простых форм.

В чём разница между Reactive и Template-driven формами?
Reactive формы полностью управляются в TypeScript, более предсказуемы, легко тестируются и масштабируются. Template-driven формы удобны для простых случаев, но менее гибкие и сложнее в тестировании.

Что такое Router и какие основные методы он предоставляет?
Router — это сервис Angular, управляющий маршрутизацией. Основные методы: navigate(), navigateByUrl(), events (для подписки на события), isActive (проверка активности маршрута).

Что такое параметры маршрута и как к ним получить доступ?
Параметры маршрута — это динамические части URL, такие как :id. Получить к ним доступ можно через ActivatedRoute, например, с помощью snapshot.params или params.subscribe().

Что такое CanActivate и как он используется?
CanActivate — это guard, определяющий, может ли компонент быть активирован. Используется для защиты маршрутов, например, проверки авторизации перед переходом.

Что такое Resolve и зачем он нужен?
Resolve — это механизм предварительной загрузки данных перед активацией маршрута. Позволяет получить данные до того, как компонент будет создан, что улучшает UX.

Что такое Lazy Loading и как его настроить?
Lazy Loading — это загрузка модулей по требованию. Настраивается через маршрутизатор, указывая loadChildren вместо children. Уменьшает начальную загрузку приложения.

Что такое Shared Module и зачем он нужен?
Shared Module — это модуль, содержащий общие компоненты, директивы, пайпы и сервисы, которые используются в нескольких других модулях. Помогает избежать дублирования кода.

Что такое Core Module и чем он отличается от Shared Module?
Core Module содержит сервисы, которые должны быть предоставлены один раз при запуске приложения. Обычно импортируется только в AppModule. Shared Module содержит компоненты, директивы, пайпы, используемые в разных частях приложения.

Что такое providedIn и как он влияет на инъекцию сервисов?
providedIn — это параметр декоратора @Injectable, указывающий, где должен быть предоставлен сервис. Может быть 'root' (глобально), конкретный модуль или null. Заменяет необходимость ручного добавления в providers.

Что такое Tree-shaking и как он влияет на сборку Angular-приложений?
Tree-shaking — это процесс удаления неиспользуемого кода во время сборки. Благодаря ему размер финального бандла уменьшается. Особенно эффективен при использовании Ivy и ES Modules.

Что такое AOT-компиляция и почему она важна?
AOT (Ahead-of-Time) — это компиляция шаблонов на этапе сборки. Это ускоряет загрузку приложения, снижает объём клиентского кода и улучшает безопасность, так как шаблоны уже скомпилированы.