Впровадження залежностей в Angular: глибоке занурення в інжекційні токени - javascript.org.ua

Angular відомий своєю потужною системою впровадження залежностей (Dependency Injection, DI), яка робить додатки більш модульними, тестованими та зручними для обслуговування. Хоча більшість розробників використовує DI для сервісів, багато хто не усвідомлює, як Інжекційні токени (Injection Tokens) можуть спростити впровадження залежностей, які не базуються на класах, таких як конфігураційні об'єкти або динамічні значення.

У цій статті ми розглянемо концепції DI та Інжекційних токенів, доповнивши їх практичними прикладами для ілюстрації їхніх переваг.

Розуміння впровадження залежностей в Angular

Впровадження залежностей (Dependency Injection, DI) — це шаблон проектування, при якому об'єкти отримують свої залежності з зовнішнього джерела, а не створюють їх внутрішньо.
Angular використовує свою систему DI для автоматизації цього процесу, розв'язуючи залежності, зареєстровані в Injector додатку.

Ось що пропонує DI:

Слабка зв'язність (Loose Coupling): Компоненти не повинні знати, як створюються їх залежності.
Масштабованість (Scalability): Залежності реєструються в одному місці, що зменшує дублювання.
Тестованість (Testability): Мок-залежності можна впроваджувати в тестах.

Що таке Інжекційні токени?

Інжекційні токени — це унікальні ідентифікатори, які використовуються для реєстрації та впровадження залежностей, що не базуються на класах, таких як об'єкти, рядки, масиви або функції. Вони вирішують ситуації, коли традиційне DI на основі класів недостатньо.

Чому слід використовувати Інжекційні токени?

Безпека типів (Type Safety): Уникайте використання магічних рядків і забезпечуйте суворе визначення типів.
Динамічні значення (Dynamic Values): Легко впроваджуйте значення, які можуть змінюватися в залежності від контексту.
3.
Кращі тести (Better Testing): Мок-токени можна використовувати в тестах для заміни фактичних залежностей.

Створення та використання Інжекційних токенів

Приклад: Впровадження об'єкта конфігурації

Припустимо, вам потрібно впровадити об'єкт конфігурації, що містить налаштування, такі як URL API та перемикачі функцій.
Ось як можна досягти цього за допомогою Інжекційних токенів:

Крок 1: Оголосіть Інжекційний токен

import { InjectionToken } from '@angular/core';  

// Оголосіть тип для конфігурації  
export interface AppConfig {  
 apiUrl: string;  
 featureFlag: boolean;  
}  

// Створіть Інжекційний токен  
export const APP_CONFIG = new InjectionToken('AppConfig');

Крок 2: Надання токена в AppModule

import { NgModule } from '@angular/core';  
import { APP_CONFIG, AppConfig } from './app.config';  

const config: AppConfig = {  
 apiUrl: 'https://api.example.com',  
 featureFlag: true,  
};  

@NgModule({  
 providers: [  
 { provide: APP_CONFIG, useValue: config },  
 ],  
})  
export class AppModule {}

Крок 3: Впровадьте токен у компонент

import { Component, Inject } from '@angular/core';  
import { APP_CONFIG, AppConfig } from './app.config';  

@Component({  
 selector: 'app-root',  
 template: `
Angular Dependency Injection
`,  
})  
export class AppComponent {  
 constructor(@Inject(APP_CONFIG) private config: AppConfig) {  
 console.log(this.config.apiUrl); // Виведе: https://api.example.com  
 }  
}

Приклад: Динамічне впровадження залежностей

Інжекційні токени також можуть впроваджувати динамічні залежності.
Розглянемо сценарій, коли ви маєте різні рівні логування для середовищ розробки та продакшн.

Крок 1: Створіть Інжекційний токен

export const LOGGING_LEVEL = new InjectionToken('LoggingLevel');

Крок 2: Надання різних значень залежно від середовища

@NgModule({  
 providers: [  
 {  
 provide: LOGGING_LEVEL,  
 useValue: environment.production ? 'ERROR' : 'DEBUG',  
 },  
 ],  
})  
export class AppModule {}

Крок 3: Впровадьте та використовуйте токен

import { Component, Inject } from '@angular/core';  
import { LOGGING_LEVEL } from './logging.token';  

@Component({  
 selector: 'app-logger',  
 template: `
Рівень логування: {{ loggingLevel }}
`,  
})  
export class LoggerComponent {  
 constructor(@Inject(LOGGING_LEVEL) public loggingLevel: string) {}  
}

Основні переваги Інжекційних токенів

Підтримуваний код
Інжекційні токени забезпечують централізовані, багаторазові та сильно типізовані рішення для залежностей, які не є класами.
2.
Тестованість дизайну
Моки можуть заміняти значення Інжекційних токенів під час тестування, щоб ізолювати залежності.
Масштабовані додатки
Легко замінювати або розширювати залежності без порушення загальної архітектури.

Висновок

Система залежностей (DI) в Angular неймовірно потужна, а Інжекційні токени відкривають ще більшу гнучкість для керування залежностями. Незалежно від того, чи йдеться про інжекцію глобальних конфігурацій, динамічних значень чи налаштувань сторонніх бібліотек, Інжекційні токени допомагають писати чистіший і більш підтримуваний код.

Ви вже використовуєте Інжекційні токени у своїх проектах Angular? Якщо ні, спробуйте їх! Це невелика додатка до вашого інструментарію, яка може значно покращити вашу роботу.

Поділіться своїми думками або випадками використання в коментарях нижче. І якщо ця стаття була корисною, не забудьте поділитися нею! 💡

Перекладено з: Dependency Injection in Angular: A Deep Dive into Injection Tokens