> Что такое компоненты, модули, сервисы, интерцепторы и директивы в Angular? (Angular)

Короткий ответ

Компоненты - это основные строительные блоки UI с шаблоном, стилями и логикой. Модули (NgModule) - контейнеры для группировки компонентов, сервисов и других частей приложения. Сервисы - классы для бизнес-логики и данных, обычно внедряемые через DI. Интерцепторы - middleware для HTTP-запросов/ответов. Директивы - инструкции для изменения DOM (структурные - *ngIf, атрибутные - ngClass).

Подробное объяснение

Компоненты - классы с декоратором @Component, содержащие шаблон (template), стили (styles) и логику (класс). Компонент управляет своей частью экрана, взаимодействует с другими через Input/Output.

Модули (NgModule) - декоратор @NgModule, который объединяет компоненты, директивы, пайпы и сервисы в функциональные блоки. Модуль может импортировать другие модули, экспортировать свои части и регистрировать провайдеры для DI.

Сервисы - классы с декоратором @Injectable, предназначенные для общей логики (работа с API, кэширование, вычисления). Внедряются через dependency injection в компоненты или другие сервисы. Обычно синглтоны на уровне модуля или приложения.

Интерцепторы - классы, реализующие HttpInterceptor, которые перехватывают HTTP-запросы и ответы. Используются для добавления токенов, логирования, обработки ошибок или модификации запросов.

Директивы - бывают двух типов: структурные (изменяют DOM, например *ngIf, *ngFor) и атрибутные (меняют внешний вид или поведение элемента, например ngClass, ngStyle). Создаются через декоратор @Directive.

На практике

В реальном проекте компоненты организуются по фичам внутри модулей. Сервисы выносят логику работы с данными, чтобы компоненты оставались "глупыми" (только отображение). Интерцепторы настраиваются один раз в AppModule для обработки всех HTTP-вызовов. Директивы часто используются для переиспользуемого поведения (например, маски ввода или подсветки).

Пример кода

TYPESCRIPT
// Компонент
@Component({
  selector: 'app-user',
  template: `<div>{{ user.name }}</div>`
})
export class UserComponent {
  @Input() user: User;
}

// Сервис
@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers(): Observable<User[]> {
    return this.http.get('/api/users');
  }
}

// Интерцептор
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const authReq = req.clone({ setHeaders: { Authorization: 'Bearer token' }});
    return next.handle(authReq);
  }
}

// Директива
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Как отвечать на собеседовании

Начни с краткого определения каждого элемента, затем приведи примеры из практики. Подчеркни, что компоненты - основа UI, модули - организация кода, сервисы - бизнес-логика, интерцепторы - middleware для HTTP, директивы - расширение HTML. Упомяни, что все они работают вместе через DI и NgModule.

Что проверяет интервьюер

• Понимание роли каждого строительного блока Angular
• Знание разницы между структурными и атрибутными директивами
• Умение объяснить, как DI связывает сервисы и компоненты
• Понимание lifecycle интерцепторов и их места в HTTP-потоке

Типичные ошибки

• Путать компоненты и директивы (компонент - это директива с шаблоном)
• Думать, что сервисы обязательно должны быть синглтонами (можно создавать отдельные экземпляры)
• Забывать, что интерцепторы работают только через HttpClient
• Считать, что модули обязательны в standalone-компонентах (в Angular 14+ можно без NgModule)