Службы и Injectable
Создавайте внедряемые службы для общей логики.
«Службы и Injectable» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Сервисы и Injectable
Сервис — это класс, содержащий повторно используемую логику или состояние, например загрузку данных или общее хранилище. Angular создаёт сервисы и предоставляет их через внедрение зависимостей.
Зачем нужны сервисы
Компоненты должны сосредоточиваться на представлении. Переносите бизнес-логику, вызовы API и общее состояние в сервисы, чтобы их можно было повторно использовать и независимо тестировать.
Декоратор Injectable
Пометьте класс сервиса декоратором @Injectable, чтобы Angular мог создать его и внедрить там, где это необходимо.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' регистрирует сервис во внедряторе корневого уровня приложения. Angular создаёт один общий экземпляр (синглтон) для всего приложения.
Провайдеры, удаляемые при оптимизации дерева
Поскольку провайдер объявлен в классе с помощью providedIn, неиспользуемые сервисы могут автоматически удаляться из пакета при оптимизации дерева.
Сервис с состоянием
Сервисы часто хранят состояние. Используя сигналы, предоставляйте из сервиса реактивное состояние.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Сервис с методами
Добавляйте методы, которые компоненты могут вызывать для выполнения действий или получения данных.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Создание сервиса
CLI создаёт заготовку сервиса, в которую уже добавлен декоратор Injectable.
ng g service dataСинглтоны совместно используют состояние
Поскольку корневой сервис является синглтоном, каждый компонент, который его внедряет, видит один и тот же экземпляр и одно и то же состояние. Так компоненты обмениваются данными.
Сервисы могут внедрять другие сервисы
Сервис может зависеть от других сервисов. Например, сервис данных может использовать сервис HttpClient для отправки запросов.
Сохраняйте специализацию сервисов
Назначайте каждому сервису одну чёткую ответственность. Небольшие специализированные сервисы проще тестировать и повторно использовать, чем большие сервисы, выполняющие множество задач.
Быстрая проверка: Injectable
Регистрация сервиса-синглтона.
Итоги: сервисы
Вы узнали, что сервисы хранят повторно используемую логику и состояние, помечаются с помощью @Injectable, а параметр providedIn: root регистрирует синглтон, доступный всему приложению. Сервисы совместно используют состояние между компонентами и могут зависеть от других сервисов. Далее: функция inject.
Часто задаваемые вопросы
Урок «Службы и Injectable» бесплатный?
Да — полный текст урока «Службы и Injectable» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Службы и Injectable»?
Создавайте внедряемые службы для общей логики. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Службы и Injectable»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Службы и Injectable
- Функция inject
- Поставщики и области действия
- Токены внедрения