Что такое сервисы в Angular?

Смысл

Сервис — класс с бизнес‑логикой, доступом к API, кэшем или shared‑состоянием. Обычно помечается @Injectable и регистрируется через DI (providedIn: 'root' или providers компонента/роута).

Компоненты остаются тонкими: шаблон и реакция на данные; тяжёлая работа, побочные эффекты и повторно используемые правила — в сервисе.

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<string[]>([]);
  readonly count = computed(() => this.items().length);

  add(name: string) {
    this.items.update(list => [...list, name]);
  }
}

@Component({
  standalone: true,
  template: `<p>В корзине: {{ cart.count() }}</p>`,
})
export class CartBadgeComponent {
  cart = inject(CartService);
}

Практика и антипаттерны

• Не дублируйте HTTP в каждом компоненте — централизуйте API‑сервисы.
• UI‑локальное состояние может жить в компоненте; сервис — когда данные шарятся между экранами.
• Следите за подписками RxJS: async pipe, takeUntilDestroyed, либо Signals.
• Не превращайте сервис в «бог‑объект» на всё приложение без границ.

Итог

Сервис + DI = переиспользуемая логика без копипаста. providedIn: 'root' — разумный дефолт для большинства app‑wide сервисов.