Coding

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