- 00:00:01 hey everyone welcome to a new video at
- 00:00:04 angular 2 and that's where you will have
- 00:00:06 a look at dependency injection angular 2
- 00:00:10 and I'll bring out another video where
- 00:00:12 we will then actually use it in the code
- 00:00:14 now what is dependency injection well in
- 00:00:17 a nutshell we can describe like that we
- 00:00:20 have an object aid which needs an object
- 00:00:22 B to function correctly
- 00:00:24 now object a could just create a new
- 00:00:28 object B to work with that now that is
- 00:00:33 what we see on the slide in angular 2
- 00:00:35 well we have two components a and B if
- 00:00:38 you want to call it like this and both
- 00:00:39 will need a service which is just
- 00:00:42 another class which offers some
- 00:00:45 functionalities both components needs
- 00:00:46 now one possibility would be to for
- 00:00:50 example in the constructor to create a
- 00:00:52 new service object in each of those two
- 00:00:55 components like you see here on the
- 00:00:57 slide now doing it this way has some
- 00:01:00 downsides one disadvantage is that if
- 00:01:05 our service changes let's say it now the
- 00:01:10 constructor of the service changes
- 00:01:11 because the service itself might need
- 00:01:13 some other objects or whatever well then
- 00:01:17 we have to change it in both our
- 00:01:20 components so it's very hard to maintain
- 00:01:23 especially larger apps because well we
- 00:01:26 might need to go to several components
- 00:01:29 to make changes there if we make one
- 00:01:31 single change in our service which is
- 00:01:34 used by several components so that is
- 00:01:37 really not too great additionally it
- 00:01:40 makes testing a lot harder or even
- 00:01:42 impossible so not the best way to solve
- 00:01:46 this problem well what is a better way
- 00:01:49 well instead of just creating instances
- 00:01:53 of the service in our components well we
- 00:01:56 can inject it now injection basically
- 00:02:00 means that in the Constructors of our
- 00:02:03 components we tell alert you hey we need
- 00:02:08 an instance of this service and then we
- 00:02:11 bind it to a private property in the
- 00:02:13 components but we don't care how the
- 00:02:15 constructor looks we don't instantiate
- 00:02:18 it we just tell our framework or
- 00:02:22 dependency injection framework which
- 00:02:24 lives inside and or – so to say we need
- 00:02:27 an instance of this service you take
- 00:02:30 care that I get this instance okay so
- 00:02:33 dad is basically how dependency
- 00:02:36 injection works we need something to
- 00:02:38 work properly and we just tell our
- 00:02:41 framework englert you in this case you
- 00:02:43 take care that I get an instance of this
- 00:02:45 object now to actually get an instance
- 00:02:49 in angular 2 we have for when we're
- 00:02:52 talking about components here to add the
- 00:02:55 providers metadata to this components
- 00:02:58 class to tell alerts you how to create
- 00:03:03 such a service but telling alerts you
- 00:03:06 how to create a such a service does not
- 00:03:08 mean that we have to specify the
- 00:03:09 constructor of our service or anything
- 00:03:11 like that there now we just have to list
- 00:03:14 the service in an array but we will see
- 00:03:16 this in the next video when we're
- 00:03:18 actually writing some code showcasing
- 00:03:21 all of those different concepts now in
- 00:03:24 the example shown here on the slides we
- 00:03:26 inject our service in two different
- 00:03:29 components which are sibling components
- 00:03:31 in this example because both they are
- 00:03:33 living next to each other right now the
- 00:03:36 question is how many instances of our to
- 00:03:39 be injected object that's angular to
- 00:03:42 create one is a singleton or one for
- 00:03:46 each time aid and checks it into an
- 00:03:49 object because well it matters obviously
- 00:03:52 in terms of when we let say access or
- 00:03:57 manipulate a property in our injected
- 00:04:00 object from two different places and we
- 00:04:02 only have one instance well then a mini
- 00:04:06 manipulation by object a will also be
- 00:04:10 reflected object P if we access this
- 00:04:12 service on the injected object there
- 00:04:16 because what we only have one instance
- 00:04:18 of it and if this instance gets changed
- 00:04:20 well it gets changed all over the place
- 00:04:24 whereas whereas
- 00:04:25 we have different instances multiple
- 00:04:28 instances we don't have that problem but
- 00:04:32 we might have unnecessarily many
- 00:04:34 instances so either way you could argue
- 00:04:38 well you could argue it both directions
- 00:04:40 so how many instances does Englert you
- 00:04:42 create it depends and the case shown
- 00:04:45 here on the slide we have two components
- 00:04:48 living next to each other so let's say
- 00:04:50 there are a sibling components right in
- 00:04:52 this case and that you will create two
- 00:04:56 instances because we will have to tell
- 00:04:59 and let you how to create such a service
- 00:05:02 which should be injected here in each of
- 00:05:05 the components unless you use a
- 00:05:08 hierarchical injector which means if we
- 00:05:11 inject something on a root component it
- 00:05:14 is also usable into child components and
- 00:05:17 those components will then share only
- 00:05:19 one instance however if we inject it
- 00:05:23 into several well sibling components so
- 00:05:26 to say we create a new instance each
- 00:05:29 time we do this basically we create a
- 00:05:31 new instance each time we specifically
- 00:05:33 tell angular to how to create such an
- 00:05:37 object now that's all the theory behind
- 00:05:39 dependency injection in a nutshell
- 00:05:41 obviously you could go much more into
- 00:05:43 detail there but that is how it works
- 00:05:45 generally in angle Q and I will have
- 00:05:48 another video where we will actually try
- 00:05:51 some of these things in a real well mini
- 00:05:54 application or with real code so see you
- 00:05:57 there and have a nice day bye