Как создать сервис в Angular и для чего он используется?

Сервис в Angular — это обычный класс TypeScript, помеченный декоратором @Injectable. Основная цель сервиса — вынести бизнес-логику, работу с данными и общие функции за пределы компонентов, чтобы компоненты оставались "тонкими" и занимались только представлением.

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

Сервис создается с помощью Angular CLI командой ng generate service my-service. Вручную нужно определить класс с декоратором @Injectable и указать, на каком уровне он будет доступен (например, providedIn: 'root' для глобального синглтона).

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

@Injectable({
  providedIn: 'root' // сервис будет синглтоном на уровне всего приложения
})
export class DataService {
  private data: string[] = [];

  getData(): string[] {
    return this.data;
  }

  addData(item: string): void {
    this.data.push(item);
  }
}

Использование через Dependency Injection

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

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: `<ul><li *ngFor="let item of items">{{item}}</li></ul>`
})
export class ExampleComponent {
  items: string[];

  constructor(private dataService: DataService) {
    this.items = this.dataService.getData();
  }
}

Где применяется

• Работа с HTTP (HttpClient) — вызовы API.
• Общее состояние (например, корзина покупок).
• Логирование, обработка ошибок, кэширование.
• Обмен данными между несвязанными компонентами.

Вывод: сервисы в Angular — это основной способ организации логики, не связанной с шаблоном. Их использование делает код чище, упрощает тестирование и повторное использование. Рекомендуется выносить в сервисы любую логику, кроме прямой работы с DOM или обработки событий представления.