Поставщики и области действия
Управляйте местом размещения служб в дереве.
«Поставщики и области действия» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Провайдеры и области действия
Провайдер сообщает Angular, как создать зависимость. Область действия, в которой он зарегистрирован, определяет количество экземпляров и круг объектов, совместно их использующих.
Корневая область действия
providedIn: root регистрирует сервис в корневом внедрятеле: создаётся один общий синглтон для всего приложения. Это наиболее распространённый вариант.
@Injectable({ providedIn: 'root' })
export class AppStore {}Провайдеры компонентов
Вы можете ограничить область действия сервиса компонентом, указав его в массиве providers компонента. Каждый экземпляр этого компонента получает собственный экземпляр сервиса.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Зачем нужна область действия компонента
Используйте провайдеры области действия компонента, когда каждому экземпляру компонента нужно собственное изолированное состояние, например состояние формы или хранилище отдельного виджета.
Корневая область и область компонента
Корневая: один экземпляр, общий для всех. Компонента: один экземпляр на каждый экземпляр компонента и его дочерние компоненты. Выбирайте вариант в зависимости от того, должно ли состояние быть общим или изолированным.
Иерархия внедрятелей
Внедрятели Angular образуют дерево. При поиске зависимости Angular сначала проверяет внедрятель компонента, затем поднимается к родительским внедрятелям и наконец доходит до корневого.
Дочерние компоненты наследуют зависимости
Сервис, предоставленный компонентом, также доступен его дочерним компонентам, если только дочерний компонент не предоставит собственный экземпляр, который скроет родительский.
Провайдеры уровня приложения
Вы также можете зарегистрировать провайдеры при запуске приложения в массиве providers функции bootstrapApplication — это похоже на корневую область действия и часто выполняется с помощью функций provide*.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass и useValue
Провайдеры могут сопоставлять токен с классом с помощью useClass, с фиксированным значением с помощью useValue или с фабрикой с помощью useFactory, что позволяет выполнять подмену и настройку.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Замена реализаций
Поскольку провайдер сопоставляет токен с реализацией, вы можете заменять реализации, например использовать имитацию в тестах, не изменяя потребителей.
Выбор области действия
По умолчанию выбирайте root для общих синглтонов. Используйте провайдеры компонентов только тогда, когда требуется изолированное состояние для каждого экземпляра.
Быстрая проверка: области действия
Состояние для каждого экземпляра.
Итоги: провайдеры и области действия
Вы узнали, что провайдеры описывают способ создания зависимостей, а область действия управляет созданием экземпляров: root используется для синглтонов всего приложения, а провайдеры компонентов — для изоляции отдельных экземпляров. Angular выполняет поиск через иерархию внедрятелей, а useClass/useValue/useFactory позволяют заменять реализации. Далее: токены внедрения.
Часто задаваемые вопросы
Урок «Поставщики и области действия» бесплатный?
Да — полный текст урока «Поставщики и области действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Поставщики и области действия»?
Управляйте местом размещения служб в дереве. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Поставщики и области действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Службы и Injectable
- Функция inject
- Поставщики и области действия
- Токены внедрения