Как создать сервис и зарегистрировать его в корневом модуле?angular-21

Создание сервиса в Angular

Для создания сервиса в Angular используется Angular CLI команда:

ng generate service services/MyService
# или сокращенная версия
ng g s services/MyService

Эта команда создаст два файла:

  1. my-service.service.ts - сам сервис
  2. my-service.service.spec.ts - тесты для сервиса

Структура сервиса по умолчанию

Базовый шаблон сервиса выглядит так:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }
}

Ключевые элементы:

  1. @Injectable - декоратор, отмечающий класс как Angular-сервис
  2. providedIn: 'root' - указывает, что сервис должен быть зарегистрирован в корневом инжекторе

Способы регистрации сервиса в корневом модуле

1. Через декоратор @Injectable

Как показано выше, использование providedIn: 'root' автоматически регистрирует сервис в корневом модуле:

@Injectable({
  providedIn: 'root' // Регистрация в корневом инжекторе
})
export class MyService {}

Преимущества:

  • Деревшакинг (сервис будет исключен из сборки, если не используется)
  • Автоматическая регистрация без необходимости добавлять в модули
  • Четкое указание области видимости

2. Через массив providers в корневом модуле

Альтернативный способ (менее предпочтительный в Angular 6+):

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [MyService], // Явная регистрация сервиса
  bootstrap: [AppComponent]
})
export class AppModule {}

Разница между способами регистрации

Характеристика providedIn: 'root' Регистрация в модуле
Деревшакинг ✅ Поддерживается ❌ Не поддерживается
Ленивая загрузка ✅ Оптимизировано ⚠️ Может дублироваться
Явная декларация ❌ Не требуется ✅ Требуется
Область видимости Глобальная Зависит от модуля

Лучшие практики создания сервисов

  1. Используйте providedIn: 'root' по умолчанию, если сервис должен быть синглтоном
  2. Размещайте сервисы в папке core/services для глобальных сервисов
  3. Для feature-специфичных сервисов используйте providedIn: FeatureModule
  4. Инжектируйте зависимости через конструктор:
@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}
}
  1. Для конфигурационных сервисов используйте InjectionToken:
export const API_CONFIG = new InjectionToken('api.config');

@Injectable({
  providedIn: 'root',
  useFactory: () => new ApiConfigService()
})
export class ApiConfigService {}

Резюмируем

  1. Создание сервиса:

    • Используйте Angular CLI (ng g s)
    • Декорируйте класс @Injectable

  2. Регистрация в корневом модуле:

    • Предпочтительный способ: providedIn: 'root'
    • Альтернативный способ: добавление в providers корневого модуля

  3. Рекомендации:

    • Для глобальных сервисов используйте providedIn: 'root'
    • Организуйте сервисы по функциональности
    • Используйте деревшакинг-дружественный подход

Правильная регистрация сервисов - ключ к эффективной архитектуре Angular-приложения.

Вопросы

Собеседования