Angular Dependency Injection in Depth – Multiple Providers (2020)

Hello guys! My name is Dmytro Mezhenskyi!  As I promised in my previous video about   Angular dependency providers, today I will  show you what means multi:true property   and we will see some use case which might  be useful. If you like angular as I do then   subscribe to my channel because you will find here  a lot of interesting videos about this framework.   Alright let's get started! So what angular  documentation says about this multi-true option   well it just briefly mentions that with multi-true  you can associate multiple different services for   only one single token and it shows how you can  use it with predefined constants but it might be   not so clear where else we could use this feature  right and in this video i would like to clarify it   so here is our project from previous lesson  where we covered dependency providers   here i would like to pay your attention on one  change i'm gonna make and as you may remember   in the previous video we built  a factory function like this one   but right after publishing that video one my  subscriber Alex suggested in comments some best   practice and i would like to share it with you the  problem of the previous approach was that we have   heart dependencies on our dependencies but i mean  that that if for whatever reason we would need to   add or remove some new dependency we would  need to adjust besides the function itself   also depth property array and even if you slightly  change the order of the dependencies your app will   fail because the factory function takes params  in exactly same order as it listed in depth array   so our code is quite fragile in this case  but the solution is very simple and elegant   the only one thing you have to do is  to provide only one dependency which is   injector and having this you can easily  get any dependency you need via method get   so i can get now my app config like this and  my services i can get absolutely the same way   so here we go now our factory is quite  independent it has only injector which   can provide any dependency it needs  without changing your providers actually   and let's make one step forward and just extract  into separate function this everything so   i have to slightly adjust it here and  define the return type so it's gonna be   either experimental or just regular regular sorry  regular logger oh my god this is what i wanted to   share with you and also i would like to ask you  if you see better solution please let me know   in the comment section and in next video I will  definitely mention your comment and your solution   and also write in the comments if you also find  this solution way more better and flexible and   now let's get back to multi-true and i would like  to start with a question have you ever wondered   what will happen if in providers we provide one  more but different service for the same token   so let's try to add one more and  check what will happen so i will   duplicate this lines but instead of use factory i  will use use value and i provide our legacy logger   for those who didn't see the previous video this  is just a javascript object which has a property   prefix and method log but if it looks like a  magic for you i would advise you to check my   previous video about angular dependency  injection i will add the link to this playlist   in the video description and also it should pop  up somewhere here or there somewhere yeah all   right if you stay here let's then continue and  i will just console log our logger and check   which one was resolved by angular so we just do  a console log inside our only need lifecycle hook   then i go to the browser and we see that angular  has resolved only one service and it took the   last one which is legacy one all right good  now we know at least the default behaviour   and now let's try to add multi-true to these  providers and I will temporarily comment out these   two lines and I leave only our console log then it  is a time to check what we get so now instead of   only one instance we have an array with both  providers in short this is everything what does   this multi true now the question is where we could  use it well angular uses it for http interceptors   when you provide multiple interceptors  classes to the token http interceptors   or when you provide validator classes for ng  validators token but we will consider another   use case and let's say when we call a log method  we want besides logging the message we want to   create some kind of report right like um it could  be a report about which browser um user uses which   params this browser has or it could  be something like i don't know an   engaging report reporter which shows how long user  interacts with your website and so on it could be   really a lot of them those all metrics are quite  different and the logic there is also different so   in order to follow single responsibility principle  we definitely should not put this everything   into one service besides this um those reporters  should be um different on the on different uh   as example i want to generate report for some  certain component only and I'm not interested   in the metrics about engaging or how long user is  being stayed in my application i just need maybe   a con report some i don't know browser agent data  and and that's it so how we can manage it and   don't drown in this in this everything so  my suggestion would be the next we will   create a separate service for every metric  uh all of these services will be implementing   the same interface called i know reporter and then  we will create an injection token called reporters   and these reporters this reporter sorry will  be injected into into our locker service and   then logger service will call all of  them all these providers in the loop   so i would suggest to start with creating uh  these files and let's start with creating an   interface so i will run ng generate interface  reporter then i go to this generated file and   let's say this interface should have a  method report and this method returns   let's it returns nothing so it's gonna  be white the next step would be to create   two reporter services so the first one  will be browser reporter so here we go   i will add skip test as well and also the second  one will be engaging service which would count   in theory it would count how long user  interacts with with the application   and finally let's create an injection token  so i create a new file and there let's export   a constant which has name reporters and  this is the new injection token with the   value reporters and the type will be reporter all  right having this we can wire up this everything   together so first of all let's implement  interface reporter for every our reporter service   so i will go to browser reporter and implement it  here then i need to implement this method report and it will just bring the message where will  be defined tweets and hate of the browser window   all right so of course their logic there could  be way more complex but let's keep it simple   then we go to engaging interface and here  we would also implement the interface   and here what could be there i think uh you could  have some counter which counts uh how many seconds   uh uh users spent on the page but um it doesn't  really matter we can just console the message in   the report method and that's it so uh now we need  to assign all these services to one reporter's   talking so let's do it in the root module level  level so i will navigate to app model and here   and here in the providers i will provide  reporters and i will use existing service   as one of the value for this token then  i will do same also for second service here we go and now we are ready to inject these  reporters into our logger experimental service   so again i will use inject annotation and this is  going to be read only array of reporters then in   log method i go in the loop through all  of the reporters and call report method   and because they all implement the  same interface i can be sure that   method reports reports sorry exist there and  now i will clean up my app component es file   so all right looks good and now we can go to the  browser and we see that oh error what let's check   why for each is not a function it could be only if  we forgot and yeah yes we forgot to add multi true   face palm so i fix it right now and  now if i go to the browser we see that   both reporters are involved if at some  point we decided to remove one reporter   we just should go to our app model and in  providers i just remove one just like this and   i do not need to adjust logger  service at all or do any extra actions   then if i go back to the browser we see that  only one reporter was executed and now if you   need to configure it differently on the let's  say component level you can go to component and   in providers you can provide only reporters you  need for this certain component and you have to   a little bit refactor provider and instead of a  factory which would return the existing service   i will use the use class dependency provider  in order to have the separate instance   so if i check my browser i will see that only the  service i provided on component level was executed   and if i remove it there will be resolved  reporters from root model injector and just   few words about why do we need to use this used  class here and we need it because if we used use   existing dependency provider it would point  out to the service in the root model injector   so reporters would be resolved also from that  injector but using use class we create a new   instance so angular will resolve reporters from  component injector and this is how you could   control and configure your reporters on  the different levels of the injector tree   okay guys that was it for today i hope you enjoyed  this video and now you have better understanding   about this multi-true option and this example  which we built in this video will unleash your   creativity and you find merit places where this  feature could be useful in your application   also don't forget to leave your feedback in  comment section and let me know if you like   this video or not so it will allow me to improve  my content for you and of course thank you for   watching until the end i wish you productive  week take care and see you in the future

Channel: Decoded Frontend

Views: 5,904

Keywords: angular dependency injection multiple implementations, angular provider, example of angular provider, angular 10 dependency injection providers, angular dependency injection factory, angular dependency injection in depth, angular dependency injection tutorial, angular 10 dependency injection, dependency injection in angular 10, webdevelopment, angular services and dependency injection, Angular, angular dependency injection, angular di

Id: zDVKrqxf5Ss

Length: 16min 2sec (962 seconds)

Published: Sun Oct 18 2020