This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll learn how Angular handles dependency injection and what dependency injection is!
Dependence injection is not a new concept.
0:00
A lot of frameworks take advantage
of this common design pattern.
0:03
Imagine I were writing a book.
0:07
I've read enough books to know,
that a book needs a cover and some pages.
0:09
If I weren't using dependency injection,
my code would be very rigid.
0:13
The pages were created at a paper mill.
0:18
The paper was created from trees.
0:21
And the trees need water and
sunshine to grow.
0:23
Rather than the book knowing its origin,
and how to reproduce itself.
0:26
The factory assembles the book.
0:30
Dependency Injection is like a factory,
0:32
kindly creating services
where we need them.
0:35
In an Angular application,
0:37
dependency injection creates
a singleton of a given service.
0:39
This comes in handy when you have
multiple areas of your application,
0:43
that need to communicate with each other.
0:46
To demonstrate how dependency
injection works in our application.
0:49
We're going to set up the HttpModule,
to retrieve entries from the server.
0:53
Go ahead and set up your dev server now,
if you're not already up and running.
0:58
Now, open up
the entry-List.component.cs file.
1:02
Before we can start using dependency
injection on this component,
1:07
we need to add a constructor function.
1:10
Angular uses the constructor function,
to instantiate the components and
1:13
wire up our dependencies.
1:17
Next, we need to import the Http service.
1:20
The Http service,
is an interface for sending and
1:24
receiving data from a backend server.
1:27
When we were adding the Http module to our
Ng module configuration in the last video.
1:30
We made this Http service available
throughout our application.
1:36
Notice we're importing Http the service,
not Http the module.
1:40
Now we'll assign the Http service as
a perimeter in the constructor function.
1:47
Be sure to define the type as
the imported Http service.
1:52
Inside the constructor function,
1:57
we can test out the Http service
to make sure it's working.
1:59
We'll add a new line and
at the start type Http.
2:03
As I type,
intelligence is helping guide me,
2:09
to what methods are available
on this service.
2:12
I'm going to choose get.
2:15
The methods on the Http
service returns an observable.
2:17
I won't be covering up
observables in this course.
2:22
To find out more information about
observables, check the teacher's notes.
2:24
Let's convert this into promise.
2:28
We can do this by appending
the toPromise function.
2:31
Then, we can chain the then
method with a success.
2:35
And a failure callback.
2:44
I've just debugger statements in here for
now.
3:02
Save the file and
head back over to the browser.
3:07
The debugger break point has been hit.
3:11
The request returned a four row fault,
3:14
which means we currently don't
have the back end server.
3:17
We'll tackle this problem
a little later on in the course.
3:20
To see what dependency
injection is really doing for
3:23
us, right click on the Http definition.
3:26
And click Go to Definition.
3:31
The Http service,
3:34
has a set of dependencies as
defined in the constructor.
3:35
The consumer of this service, because
of dependency injection isn't concerned
3:40
about these dependencies,
because Angular will provide them for us.
3:45
Our entry list component only
needs to specify what it needs.
3:50
The Http service.
3:54
Then the Dependency Injection
system can handle the rest.
3:57
Dependency Injection is pretty cool.
4:01
In the next video,
we'll make good use of our Http service.
4:03
See you there.
4:07
You need to sign up for Treehouse in order to download course files.
Sign up