Как в Angular работает dependency injection

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Основные концепции DI в Angular

1. Провайдеры (Providers): Провайдеры определяют, как создавать или получать зависимости. В Angular провайдеры регистрируются в инжекторе, который отвечает за создание экземпляров зависимостей.

2. Инжектор (Injector): Инжектор — это контейнер, который управляет всеми зависимостями в приложении. Он создает экземпляры зависимостей на основе зарегистрированных провайдеров.

3. Токены (Tokens): Токены используются для идентификации зависимости, которую нужно предоставить. Обычно это классы, но могут быть и строки или символы.

4. Сервисы (Services): Сервисы — это классы, которые содержат бизнес-логику и могут быть внедрены в компоненты или другие сервисы.

Как работает DI в Angular

Когда Angular создает компонент, он использует инжектор для поиска и предоставления всех необходимых зависимостей. Рассмотрим пример:

import { Injectable } from '@angular/core';
​
@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return 'Data from service';
  }
}

• @Injectable: Декоратор, который указывает, что класс может быть использован в качестве зависимости. Параметр providedIn: 'root' означает, что сервис будет доступен на уровне всего приложения.

Теперь создадим компонент, который использует этот сервис:

import { Component } from '@angular/core';
import { DataService } from './data.service';
​
@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`,
})
export class ExampleComponent {
  data: string;
​
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

• constructor(private dataService: DataService): В конструкторе компонента мы объявляем зависимость DataService. Angular автоматически предоставит экземпляр DataService при создании ExampleComponent.

Зачем нужен DI

• Упрощение тестирования: Зависимости можно легко заменять на моки или стабы, что упрощает тестирование.
• Модульность: Компоненты и сервисы становятся независимыми и легко заменяемыми.
• Повторное использование кода: Сервисы могут быть использованы в разных частях приложения без дублирования кода.

Пример использования DI

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
  getUsers() {
    return ['User1', 'User2', 'User3'];
  }
}

Теперь мы можем использовать этот сервис в компоненте:

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user }}</li>
    </ul>
  `,
})
export class UserListComponent {
  users: string[];
​
  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

• UserService предоставляет данные о пользователях, а UserListComponent отображает их. DI позволяет легко заменить UserService на другой источник данных, если это потребуется.

Dependency Injection в Angular — это мощный инструмент, который упрощает управление зависимостями, улучшает тестируемость и способствует созданию модульного и поддерживаемого кода.