Angular 2 Tutorial (2016) – Dependency Injection (1/2)

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

You may also like