#3 Angular dependency injection framework. Providers. Полный обзор вариантов провайдеров

Рет қаралды 9,151

Күн бұрын

Полный обзор вариантов провайдеров для секции providers в angular описаны в этом видео.
SOLID важные принципы для гибкой архитектуры приложения. Dependensy Injection реализует Dependensy Inversion принцип. Понимание и знание angular di framework позволит показать себя на собеседовании, позволит начать делать проекты по правильной архитектуре с заделом на дальнейшие требования клиента.
Важность DI не такая очевидная, однако начав использовать подходы навязанные DI, будет сложно отказаться от них в дальнейшем.
Это стартовое видео по курсу Angular DI framework. В нем я рассказал какую проблему решает DI и как с первый строчек кода в Angular придется столкнуться с конфигурацией DI.
Презентация docs.google.com/presentation/...
0:00 Введение
0:28 1 Простой Provide в @NgModule (Provide)
2:54 2.1 useClass замена на наследник
5:20 2.2 useExisting (Singleton)
8:03 3 useValue (подмена литералом)
10:15 4 InjectionToken внедряем интерфейс
16:08 5 useFactory (Динамические зависимости)
20:50 6 useFactory в @Injectable
23:39 7 multi: true
27:03 Выводы (презентация в описании)

Пікірлер: 57

@grommaks 4 жыл бұрын

Приветствую друзья! Я не тратил времени на просьбу поставить лайк и подписаться, по этому оставлю это в комментариях 🐶 Пишите, что еще хотели бы видеть у меня на канале? Хорошего настроения 😎😸✌️

@someinc 8 ай бұрын

Возвращаюсь к этим видео спустя опыт и наконец-то понимаю о чём речь, спасибо за твой труд!

@brucewayne_007 11 күн бұрын

В 5 пункте не ясно почему сервис не injectable если по итогу инъекция происходит Очень круто!

@aleksandrzelenskiy4000 3 жыл бұрын

Просто смотреть не так эффективно, нужно самому все проделать. Очень нужный и сильный материал, спасибо!

@kseniaaslamova8994 6 ай бұрын

Спасибо за подробное описание, наконец, понятно, что все эти записи в модулях значат)

@mila4308 2 ай бұрын

спасибо большое за подробный, интересный, понятный курс 🤩🙏

@SALEMVSEM 2 жыл бұрын

спасибо за подробное и внятное объяснение столь сложной темы

@evgenlazeykin8537 4 жыл бұрын

Круто. Продолжай в том же духе)

@vladbelov5875 2 жыл бұрын

Отличное и информативное видео! Спасибо вам большое!

@davidbaghdasaryan2486 4 жыл бұрын

Больше по архитектуре Ангуляр 👌🎉

@user-xp3xm5ge6s 3 жыл бұрын

Добавляю второй на канале женский комментарий. Спасибо за то что помогли лучше разобраться в DI)

@grommaks 3 жыл бұрын

Спасибо 🌺

@ibrmkoibrmko2493 Жыл бұрын

Спасибо. Очень подробно и внятно

@davidbaghdasaryan2486 4 жыл бұрын

Хороший контент спасибо. Ангуляр лучший

@GGSoft2009 2 жыл бұрын

Интепесно было бы Ваши лекции по поводу: Как работать с капчой: С datetimepicker; с локализацией на прымере; с RxJs; File upload; Как развернуть на сервере; По моему что-то изменилось в 14 версии (Будто не надо комп.-ов зарегистрыровать в NgModule) по подробнее если можно: Ваш ждет успех. Так что продольжайте

@antonasipenka2941 Жыл бұрын

Спасибо! Замечательный материал

@user-kl6kc9gp2c 2 жыл бұрын

Материал был очень полезен

@nadyanaryvkina3576 Жыл бұрын

Оставлю комент за девушек) Спасибо за разбор!

@IngvarLosev 2 жыл бұрын

Спасибо огромное!!!

@olegzozulia6898 6 ай бұрын

Додивився і вийшов покурити.

@denisbielishev 3 жыл бұрын

UseExisting используем, если нам нужен синглтон. Например: state manadger ngrx является единым источником правды (один объект). И мы хотим, чтобы у нас состояние всего приложения хранилось в одном месте.

@mila4308 2 ай бұрын

девочки тоже есть)) у нас на проекте больше женского пола, чем мужского

@GGSoft2009 2 жыл бұрын

Большое спасибо за труд!!! Это наверное можно применить к уже существующему проекту, где заказчик позже попросил поменять поведение класса к определенной области и при этом нужно оставить существующий клас тоже.

@grommaks 2 жыл бұрын

Это способ разворота зависимости, из-за чего можно как создавать изолированные модули, так и гибко подменять логику в существующих модулях

@denya_manunited 4 жыл бұрын

Сделай пожалуйста отдельное видео по декораторам в Nestjs или Angular. Но всё же предпочтительнее в Nest)) Пишу проект на Nest, а до этого с Angular не сталкивался. Вот и "смущают" меня эти декораторы

@grommaks 4 жыл бұрын

Гуд постараюсь снять видео на эту тему) Тут нужны уточнения 1) Не понятен сам механизм декоратора и фабрики декораторов? 2) Не понятны какие существуют декораторы в NestJs 3) Не понятно как создавать свои декораторы в NestJS 4) Свой вариант? :)

@denya_manunited 4 жыл бұрын

@@grommaks Больше всего 1-й и 3-й пункты

@grommaks 4 жыл бұрын

Denis Dyadya Круто Как раз планировал дописать уроки по TypeScript Декораторы это полностью фишка TypeScript Добавил в план, пралельно или после этого курса допишу уроки по TS где рассмотрю эту тему подробно с примерами 😉

@denya_manunited 4 жыл бұрын

@@grommaks ОК, спасибо заранее, буду ждать)

@user-iq8qp5mt4b 2 жыл бұрын

в конструкторе забыли модификатор доступа, см 1:44

@grommaks 2 жыл бұрын

Не забыл) Если нужно сохранить как свойство объекта, то нужно указывать, если будете использовать только в самом конструкторе, то не нужно указывать

@regedam7559 Жыл бұрын

Начиная с 14 версии Angular, можно использовать inject() метод внутри useFactory, вместо того, чтобы явно указывать зависимости в deps массиве и передавать их как параметры

@grommaks Жыл бұрын

Как оказывается, inject был доступен гораздо раньше. В release notes некоторые блогеры указывают что это пришло именно с 14 версией, но большинство блогеров ничего об этом не говорят. Официальные ноуты вроде тоже не упомянули эту фичу (еще не проверял) P.S. в 13 ангуларе использовал inject P.S.S. deps нужен не для того, чтобы потянуть зависимость, а для того, чтобы сказать DI что мы зависим от этих токенов. Если заменить на inject, то если зависимость еще не была решена, мы можем получить ошибку...причем при компиляции поведение может меняться и нет гарантии работоспособности. P.S.S.S. если на то нет везких причин, не стоит использовать inject, за счет удобства написания трех строчек кода, мы получим менее расширяемый код и потенциальные баги

@regedam7559 Жыл бұрын

@@grommaks Спасибо за объяснения! Очень полезная инфа

@brucewayne_007 11 күн бұрын

5 и 6 разве аналогичны? Насколько я понял, в 5 вручную передаём экземпляр сервиса в каждом месте, где инъекция будет, а в 6 поставили @injectable и автоматом всё будет делать ангуляр, создаст один общий 6?

@bukanaka 2 жыл бұрын

Материал топовый, без него никакой Ингуляршек не будет самим собой

@grommaks 2 жыл бұрын

Но спустя больше года, я накопил дополнительной информации по этой теме) и мечтаю найти время, чтобы переснять с учетом всех правок)

@bukanaka 2 жыл бұрын

@@grommaks Очень бы хотелось)

@galinagorbel 2 жыл бұрын

@@grommaks Найдите, пожалуйста!

@grommaks 2 жыл бұрын

@@galinagorbel Сразу как закончу плейлист по базовому ангулар буду переснимать смежные плейлисты, по DI, TS и другим темам, чтобы курс был полноценный и комплексный)

@galinagorbel 2 жыл бұрын

@@grommaks это будет какой-то новый плейлист или дополняете тот, который называется Первое знакомство с Angular?

@Renarus 2 жыл бұрын

Про useExisting правильно уже написали, что это singleton. А яркий пример где это может быть использовано, например получение ConnectionString к БД.

@grommaks 2 жыл бұрын

Это не синглтон, это означает что резольвер попробует найти созданный объект у родительских инжекторов, если не найдёт то создаст новый. Синглтон этого когда гарантируется один и только один инстанс некоторого класса

@denisbielishev 3 жыл бұрын

const pageConfigValue: PageConfig = {title: `Вот бы перерыв сейчас :)`}

@grommaks 3 жыл бұрын

😹

@MovaClub 10 ай бұрын

хрєновєнькоє обьяснєніє

@grommaks 10 ай бұрын

🥲

@VendettaUkraina 4 жыл бұрын

useClass и useExisting еще понятно что можно использовать в юнит тестировании, мокая данные с сервисов и так далее. Но фабрики не совсем понятно, в одном файле хранится строка, и мы делаем DI в модуле импортируя этот файл туда, а в компоененте мы обратно иппортируем этот файл со строкой но уже с декораором @Inject. Почем нельзя просто импортировать этот файл со строкой сразу в компонент оминая манипуляции в модуле, на кой чёрт делать всякие фабрики в модуле при этом усложняя код и 2 раза импортируя файл. Я извиняюсь, но я действительно не вижу профиту в таких лишних манипуляциях, как по мне это какое то усложнение кода

@grommaks 4 жыл бұрын

@Inject используется чтобы внедрить токены. Например интерфесы только через токен можно, строки, массивы Выгода в том что их легко переопределить у себя в проекте

@bukanaka 2 жыл бұрын

Что не является классом внедрить без @Inject() не получится, для этого и создаётся токен интерфейса, объекта и т.д., чтобы внедрить таким образом, иначе никак

@RedkeiGost 3 жыл бұрын

Строк для лохов. Шаблонные литералы для четких es6 и далее поцанчиков. [крутой смайл] Воспринимать как шутку.

@grommaks 3 жыл бұрын

Да упокоится с миром IE11 и его поддержка в 2021 году

@EvgeniySchem Жыл бұрын

В 13 ангуляре возникал ошибка "Property 'pageConfig' does not exist on type 'AppComponent'." при внедрении @Inject(PAGE_CONFIG) pageConfig: PageConfig. Получилось её решить добавлением модификатора доступа @Inject(PAGE_CONFIG) public pageConfig: PageConfig