Вопрос с собеседования · Frontend

Как работает внедрение зависимостей в Angular?

JuniorАрхитектура фронтенда
Ещё спрашивают так:
  • Что делает @Injectable?
  • Что такое providedIn root?
Коротко

Сервис — класс с @Injectable; Angular сам создаёт его экземпляр и передаёт компонентам и другим сервисам, которые его запросили (через конструктор или функцию inject()). providedIn: 'root' — один экземпляр на всё приложение (синглтон); провайдер на уровне компонента — свой экземпляр для компонента и его детей. DI упрощает тестирование (подмена сервиса фейком) и разделяет ответственность: компонент показывает, сервис получает и хранит данные.

  • Иерархия инжекторов повторяет дерево компонентов
  • Токены (InjectionToken) — для конфигурации и не-классов
  • HttpClient тоже приходит через DI

Подробно

@Injectable({ providedIn: 'root' })
export class OrdersService {
  private http = inject(HttpClient);
  list() { return this.http.get<Order[]>('/api/orders'); }
}

Что хотят услышать

  • Injectable и автоматическое создание.
  • Синглтон root и провайдеры компонентов.
  • Польза для тестов.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Инжектор создаёт сервисы @Injectable и отдаёт их запросившим; providedIn root — синглтон
  • ✗providedIn root создаёт новый экземпляр сервиса для каждого компонента, который его запросил
  • ✗Компонент сам создаёт сервис через new в каждом методе, Angular лишь хранит ссылку
  • ✗DI в Angular мешает подменять сервисы в тестах

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования