Angular dependency injection Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 32 of angular 2 tutorial in
this video we'll discuss what is
dependency injection and how it works in
angular let's understand this with an
example here we have a code snippet from
Allah employee list component this is
the same component that we have been
working with so far in this video series
this component
displays list of employees as you can
see right here so this employee list
component needs employees data so
instead of having that data access logic
within our employee list component we
offloaded that responsibility to
employee service so later if we need
this employee data within another
component instead of repeating that
logic we can simply reuse this employee
service now to be able to use this
employee service with another employee
list component we need an instance of
this service so we can use that instance
to call get employees method of the
service which returns us the list of all
employees but if you look at the piece
of code that we have right here we are
not creating an instance of this
employee service anywhere all we are
doing here is created a private variable
of type employee service and then the
constructor also has a parameter of type
employee service we then initializing
the class private field with a
constructor parameter we are then using
that private field as an instance to
call the get employees method of this
service we're not using the new keyword
anywhere here to create an instance of
this employee service
so naturally the obvious question that
we get to our mind at this point is how
are we getting an instance of this
employee service now one thing we can be
sure is this employee list component
itself it's not creating an instance of
this employee service by looking at this
code what we can understand is this
constructor is being provided with an
employee service instance and then they
using that instance to assign this
private field and then we are using the
private field to call the get employees
method we know when an instance of this
employee list component is created its
constructor gets called so into the
constructor someone is creating
and injecting an instance of the
employee service and then that instance
is being used to assign is private fear
and then we are using the private field
as an instance to call the get employees
method of the service so the obvious
question that we get at this point is
who is creating and providing that
instance to the constructor of our
Employee List component the answer is
the Angela injector when an instance of
this employee list component is created
the angular injector creates an instance
of employee service and injects that
into the constructor and within the
constructor via then assigning that
injected instance to this private field
and then we are using the private field
to call this service so the next natural
obvious question that we get at this
point is how does the angular injector
know about our employee service now
before we answer that question we have a
shorthand syntax for these three lines
of code so whatever these three lines of
code is doing we can achieve exactly the
same thing using this one line right
here which is this this shorthand syntax
in our previous videos as well so on
this slide right here we have the
angular injector which creates and
injects the service and here is the
component that needs the service
instance now the question that remains
unanswered is how does this angular
injector know about our employee service
now to tell the angular injector about
our employee service we need to register
our service with the angular injector to
register the service with our angular
injector we either use providers
property of ng module decorator or
component decorator so this means we can
register a service with the angular
injector at a component level or at a
module level what is the difference
between the two we'll discuss that in
our upcoming videos for now let's
understand that to register a service
with an angular injector we can either
use the providers property of NG module
decorator or component decorator now
let's quickly recap what we have
discussed so far
here is our Employee List component and
we know this component
as a dependency on employee service so
the component specifies its dependency
by using a constructor parameter like
that the angular injector now we'll look
at its constructor and says all right
you have a dependency on employee
service so let me create an instance of
that dependency and inject into your
constructor but wait a minute before the
angular injector can create an instance
of the service and inject it into the
component the angular injector needs to
know about the service now we tell the
angular injector about our service by
registering our service with the angular
injector using the providers property of
NG module decorator or component
decorator here is that same piece of
code notice within our employee list
component we have a constructor and the
constructor specifies it has a
dependency on employee service now the
angular injector is going to create an
instance of employee service and inject
it into this employee list component
constructor
whenever an instance of this employee
list component is created but for the
angular injector to be able to inject an
instance of employee service it needs to
know about our employee service that
means we will have to register our
employee service with the angular
injector and we are doing that using the
providers property of NG module
decorator so we see the list of
employees as expected but let's comment
this providers property now if we
comment this the angular injector does
not know about our employee service so
it will not be able to create an
instance and inject that into our
Employee List component let's look at
the error message that we get let me
reload the page notice we don't see
anything on the webpage let's launch
browser developer tools and look at the
error message look at what the error
says no provider for employee service
and it is an injection error so
basically the angular injector is
complaining that you said you have a
dependency on employee service but I
don't know any
about this employee service let me know
what this employee service is and I can
inject an instance of that dependency
when required and to tell the angular
injector about our employee service we
use the providers property now if we get
this right
as far as dependency injection in
angular is concerned there are two
simple and straightforward steps specify
a dependency using the constructor
parameter like this and then register
that dependency with the angular
injector using the providers property
it's that simple so what is dependency
injection it's a very common coding
pattern in which a class receives its
dependencies from an external source
rather than creating them itself so if
we relate this definition to our example
in our case this component needs an
instance of this employee service
instead of the component creating an
instance of this employee service it is
receiving that instance from an external
source in our case the angular injector
at this point we still have several
questions unanswered like why should we
use dependency injection what benefits
does it provide why can't we directly
create an instance of this employee
service class within our Employee List
component using the new keyword and then
use that instance instead of using
dependency injection they'll answer all
these questions in our next video thank
you for listening and have a great day