Angular dependency injection in depth - Dependency providers (2021)

Подписаться 50 тыс.

Просмотров 66 тыс.

50% 1

💥Angular courses made by Dmytro - bit.ly/df-courses 💥
✂️Use coupon RU-vid_DISCOUNT to get a 10%-off discount
Hello guys! Let's continue to talk about in-depth topics of #Angular dependency injection. Today I would like to show you dependency providers like useClass, useExistiong, useValue, and use factory. Likewise, resolution modifiers control how Angular resolves dependency - dependency providers responsible for how Angular should create dependency instances. It allows you to replace different service implementations in runtime which makes your application extremely powerful and flexible. I hope you find I lot of use-cases in your applications. Thank you for your attention and enjoy watching! 😉
Angular Dependency Injection - Understanding hierarchical injectors (2020)
• Angular Dependency Inj...
Angular Dependency Injection in Depth - Resolution modifiers (2020)
• Angular Dependency Inj...
🕒 Time codes:
00:00:00 - Intro
00:01:00 - Quick recap of how we provide dependencies
00:01:18 - Describing the problem
00:03:14 - useClass in Action
00:05:46 - useExisting in Action
00:07:44 - useValue in Action
00:09:06 - A little bit about InjectionToken()
00:12:26 - useFactory in Action
00:15:11 - useValue vs useFactory. What's the difference?
00:16:24 - multi:true announcement
00:16:43 - Outro
------------------ See my another videos about Angular ------------------
✅ Check out my video "My TOP 5 Angular Interview Questions"
• TOP 5 Angular Intervie...
✅ Check out my videos about Angular Material Library:
• Angular Material
✅ Check out my videos about Angular CDK:
• Angular Material CDK
🔗 Links:
More about Dependency Injection:
angular.io/guide/dependency-i...
#angulartutorial #webdevelopment #dependencyinjection

Наука

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@DecodedFrontend 2 года назад

🙌You can support this channel buying one off my courses here bit.ly/df-courses! 👉Use coupon code *RU-vid_DISCOUNT* to get a 15%-off discount for all my Angular Courses.

@UIGems 2 года назад

Great video! Dislikes are from Angular documentation team 😁

@danieldouglas8953 3 года назад

Very well explained and it's good to see some real world examples of usage which is something a lot of videos lack.

@saulo5216 3 года назад

That's really good, mate! Saved me from a lot of trouble. Unfortunatelly the Angular documentation does not have as many examples as here, but now I think I have a solid grasp on that topic!

@collinsk8754 Год назад

Very comprehensive tutorial. Thanks.

@johnadaikalasamy 3 года назад

great video, well explained. Thank you very much :)

@mikojan85channel Год назад

12:25 "I hope that it is clear now" I wish it was clear, it's complicated, I am still learning it.

@nasheedstation260 2 года назад

Awesome Awesom Awesome Video! Very detailed explanation! Thanks! :)

@Powerful-Manifestor- 2 года назад

Awesome explanation!

@yuriiilnytskyi7698 2 года назад

Dude, you did a really great job. I was aware about these features of Angular DI but also, I was always a bit struggling with deep understanding how does it work under the hood. Now I'm happy that I do :) Thank you man!

@rembautimes8808 6 месяцев назад

Mezh is probably *the* best angular content creator especially for advanced topics. DI is a fantastic tool if incorporated early in a project as it allows for significant code reuse making it much more maintainable and robust. I watched this video on DI several times and finally plucked up the courage to use Injection tokens for the first time in my side project.

@DecodedFrontend 3 года назад

Dear developers! Thank you for watching my videos. I hope you will find it useful and I appreciate any feedback from you in comments. Have a productive week 😉 P.s IMPORTANT!!! @Alex Malkevich suggested in comments a very nice approach which allow you to make your useFactory even more flexible. Instead to provide all dependencies in deps: [...] you can provide just Injector and get dependencies via Injector.get(YourServiceHere). Using this approach you should not care any more if your factory function will get new dependency or if dependency order will be changed. The pseudo-code would look like this: { useFactory: (injector: Injector) => injector.get(APP_CONFIG).experimentalEnabled ? ... : ... , deps: [Injector] } Thanks for suggestion, Alex!

@bukanaka 2 года назад

Гуд

@collinsk8754 Год назад

Now you can even use the 'inject(YourServiceHere)' in v14+

@kousheralam8657 2 года назад

Thank you bro, learned a lot.

@lhargil 3 года назад

This was well-explained. Thank you very much. :)

@DecodedFrontend 3 года назад

You are welcome 🙏🏻

@sanjaygarg3540 3 года назад

Very nice explanation !! Loved it!!

@DecodedFrontend 3 года назад

Hi Sanjay, Glad you liked it ;)

@rikisyahputra3805 3 года назад

I don't know why angular DI is so much easier to understand when watching this rather than reading the docs

@DecodedFrontend 3 года назад

Because these videos were made with love 😀

@calbofacundo8549 Год назад

literally you are the best man wtf

@rajanjoseph4877 3 года назад

Wow! It's really useful to me! Thanks a lot 👍

@DecodedFrontend 3 года назад

Glad it was helpful!

@rs4267 Год назад

Thanks I've learned something new 🎉

@user-fc6yy4vu3w 6 месяцев назад

very good, thanks

@dmitriy5906 3 года назад

Wow thanks. That was useful especially useFunction part

@DecodedFrontend 3 года назад

Hi Dmitriy! Glad to hear it 😊 thank’s for feedback

@leonardopeixoto387 Год назад

Great class, thanks for making it ! One smal correction, tho - on 5:55 you say that useClass has this "feature" of creating new instance, suggesting that regular methods of providing doesnt create new instances. But I just did a small experiment - when Loggerservice is provided in providedIn clause in itself and on providers clause of component, each one of those create new instances of LoggerService. I tested it creating an Input to pass the external logger, and compared it with the logger provided in the "providers" clause of the component itself - result different. Did a test incrementing a count property in the LoggerService to compare, and confirmed - they were two independent instances.

@sidharthaverma9609 2 года назад

I can only say thank you so much!!!!!!!

@DecodedFrontend 2 года назад

Glad you liked it!

@rahultej8352 3 года назад

u r the best

@mouradbosli5497 3 года назад

Great video man

@DecodedFrontend 3 года назад

Thank you, Mourad🙂

@Bukratusi 2 года назад

Hatsoff thanks

@SouravDuttaROCKSTAR 3 года назад

This could be really useful to extend an existing project let's say a codebase developed for one country can be used by other teams to accommodate changes for other countries based on the useFactory concept ... Gonna use this approach, just awesome :D

@DecodedFrontend 3 года назад

Great! Let me know how it eventually worked out for you :)

@pavelsokolov4190 2 года назад

Could you please provide more cases where it can be useful except of the experimental mode?

@umakantlakhawar9092 3 года назад

Thanks you so much for explaining DI in Angular in simple words. I have watched all your videos on Dependency Injection, very nicely explained . I want to memorize/revise these concepts quickly within few minutes, so could you please provide the source code for the same.

@DecodedFrontend 3 года назад

Hi! Unfortunately I didn't save the source code from this episode :(

@Don-sl1ny 3 года назад

Hello What is the practical use case of useclass provider.

@Sunill_Waugh 3 года назад

Please create a video on creating components from configuration file dynamically, thanks

@shivanimehrotra187 3 года назад

Please make a video on Angular Change Detection and Ivy Renderer.

@DecodedFrontend 3 года назад

I find Ivy also very interesting topic. Recently I exactly started to investigate more about it. Maybe quite soon there will be a video ;)

@chrisfelix9065 2 года назад

All your videos are better than the Angular Docs

@mohammadmokhtari8 2 года назад

👌👌👌

@joshblf 3 года назад

It would be cool if you went in depth on tree-shakable providers. You mentioned them a few times but didn't really go into it.

@DecodedFrontend 3 года назад

Hi! Here is such a vid ;) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nNsDWOtHQDk.html

@dawidniegrebecki2205 2 года назад

Such a great video! Coming from the ReactJs background, the dependency injection in angular was totally not understandable for me, but you explained it great! Thank you!

@bukanaka 2 года назад

Здравствуй, Дмитрий. Спасибо за столь отличный материал. Но у меня всё-таки есть недопонимание на счёт useClass/useExisting. В чём разница между обычным провайдом providers: [SomeService] и через useExisting, например, providers: [{ provide: SomeServiceTwo, useExisting: SomeService}] ? То есть в чём смысл такой подачи сервиса под другим "соусом"? Или в этом нет никакой разницы с точки зрения реализации кода, а всего лишь дело в каких-то паттернах, которые это требуют? Благодарю заранее.

@DecodedFrontend 2 года назад

Привет! Спасибо за отзыв) Ну как пример, часто возникает ситуация, что много компонентов зависят от одного сервиса, например UserService. То есть у нас есть десятки компонентов в конструкторе которых имеем constructor(private user: UserService) {} и бывает часто, что нам нужно подменить реализацию UserService какой-то другой в которой, например, в которой более производительный алгоритм (прим. PerformantUserService), но мы не хотим лезть в каждый конструктор компонента и менять UserService на PerformantUserService и более того, иногда мы можем не иметь доступа к исходному коду этого компонента (прим. Компонент часть библиотеки) в таком случае мы используем useExisting и таким образом одним махом мы подменяем реализацию для всех компонентов, не трогая их конструкторы). Это более безопасно и менее затратно по времени)

@amaizingcode 2 года назад

SOS: Hello Dmytro, hope you're well. In minute 4:53 you said that useClass: EperimentalLoggerService is like return new EperimentalLoggerService (...params) But actually how could we add params to that class? and also if the params are generated by the component at run time, it is possible to added them?

@DecodedFrontend 2 года назад

Hi Julian, They will be resolved by DI automatically. Just don't forget to annotate EperimentalLoggerService class with @Injectable() because otherwise angular won't be able to inject dependencies for EperimentalLoggerService. For the second part of the question, I would need some examples of what are you going to achieve. But if I understand right, you won't be able to provide properties because at that time most probably your providers will be already resolved and instantiated.

@pakkaodia 3 года назад

love from india make tutorial of content projection

@DecodedFrontend 3 года назад

Thanks! :)

@mahdirezazadeh5076 2 года назад

Thank you 🌷 Just use larger font for watching comfortable

@DecodedFrontend 2 года назад

I will keep in mind, thanks for the hind and feedback :)

@mahdirezazadeh5076 2 года назад

@@DecodedFrontend keep going you are great 👏

@pedrinhofernandes 3 года назад

What would be the best approach when, let's say, you had your application making the API calls on the same base URL but then some module(new section) was introduced that would make calls to a different base API URL?

@DecodedFrontend 3 года назад

Hi, Pedro! The first think which comes to my mind is to make those modules lazy loaded and provide your injection token with URL into those modules (instead of 'providedIn: root'). When Angular loads lazy module it creates a child injector and all components/services in this module should in theory resolve endpoints which you provided for this concrete lazy module. Also you could play around with Injector.create() API which allows you to create injector manually in the Injector hierarchy and you can provide different URLs on different levels.

@piracyable 2 года назад

This video really helped me to understand the DI in angular. Can you pls suggest how following can be accomplished? In 13:45, how to use the component @input variable to decide which service instance is to be created.

@DecodedFrontend 2 года назад

Hi! I am afraid that it won’t possible because DI resolves everything before input binding will be resolved.

@piracyable 2 года назад

@@DecodedFrontend If we need to dynamically instantiate the service, do we have to create the instance with new keyword without using the DI? or we have some other alternatives?

@frontend3409 2 года назад

That's strange that the Angular's error @ 8:34 tells that there is no provider for Object. Message should be that there's no provider for LegacyLogger object or smth...

@cristhianmahecha1707 2 года назад

I still don't understand why when comparing the two they give false with the useClass, if when giving console.log of both services the same object is obtained, So if the Injector is not supposed to do: token: LoggerService => Value: new ExperimentalLoggerService(), and using the private experimentalLogger: ExperimentalLoggerService, the injector does: token: ExperimentalLoggerService=> Value: new ExperimentalLoggerService(). To then inject the instances when the component is created, they both have the same value but their token is different. It should give true since its value is the same instance, I don't understand 😕

@rahultej8352 3 месяца назад

why the syntax factory:()=>({}) instead of factory:()=>{}

@DecodedFrontend 2 месяца назад

Thanks for your question. This is Because I return an object from the factory. The => ({}) is a short version of => { return { … } }