Лучшей практикой при создании сложного программного обеспечения является использование модульной конструкции. Функциональность, которая абстрагируется и разбивается на модули через четко определенный интерфейс. Это основной подход фреймворка Angular.
Давайте посмотрим на механизм, лежащий в основе системы Angular Dependency Injection.
Ответственность Angular Injector заключается в предоставлении настроенной зависимости для компонентов или служб, которые используют эту зависимость. Причина, по которой это называется инъекцией, заключается в том, что связь между зависимостью и потребителем зависимости происходит во время выполнения.
«Внедрение» настраивается с помощью токена внедрения, который является частью массива провайдеров Angular в компоненте или модуле. Механизм Injector, использующий этот токен Injection, создает экземпляр поставщика и внедряет его в Component или Service для использования.
Традиционная модель ООП заканчивается тесно связанным кодом, что увеличивает технический долг и проблемы с обслуживанием. Но Dependency Injection разрешает эти зависимости в режиме реального времени.
Когда приложение загружается, Angular создает инжектор RootModule для корня всех модулей. Конфигурация RootModule Injector становится частью ModuleInjectorTree, и ее список зависимостей оказывает влияние на все приложение.
RootModule загружает основной компонент (AppComponent), и поскольку Angular создает два разных дерева инжекторов для модулей и элементов (компоненты и директивы), AppComponent становится корневым инжектором дерева ElementInjector.
Angular создаст дочерние компоненты и подмодули под своими уважаемыми корневыми инжекторами.
Все зависимости модуля или компонента упоминаются в конфигурации «поставщиков» Injectable.
Регистрация провайдера в конкретном узле дерева определит область зависимости, поскольку она становится доступной для всех дочерних компонентов или подмодулей в дереве зависимостей. Это означает, что регистрация службы в корне дерева сделает ее доступной для всей области в корневом узле.
Декоратор @Injectable
Чтобы сделать сервис внедряемым, вы должны украсить его декоратором @Injectable(), чтобы указать Angular, что сервис доступен для внедрения. Вы также можете передать некоторые аргументы декоратору.
Классы, украшенные @Component и @Directive в Angular, автоматически помечаются как @Injectable, поэтому нет необходимости явно использовать декоратор @Injectable для этих классов.
Декоратор @Injectable имеет важное свойство «providedIn», которое указывает, где предоставлять зависимость. Использование здесь строки «root» сделает службу доступной для всего приложения.
Но! Если вы разрабатываете сложное приложение, использование providedIn является предпочтительным способом указать доступность службы в конкретном модуле, так как это позволяет древовидную структуру для службы.
Вот пример:
Это означает, что GetRandomUserService не будет внедрен в дерево вашего приложения, если ваше приложение не импортировало SharedModuleModule.
Проверьте мой фреймворк с открытым исходным кодом QQ:
https://github.com/jsmuster/qq
Посмотрите другие мои статьи
Пожалуйста, дайте статье немного 👏 и поделитесь ею!.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 💰 БЕСПЛАТНЫЙ курс собеседования по программированию
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
