Hello, everyone, and welcome back.
In this lesson, we are going to write our own Provisor that is going to provide here to the application
component, these dependancy, the courses, service dependancy.
Remember, the goal of this exercise is to understand how dependency injection works under the hood.
Usually we don't need to write our own providers by hand.
They are automatically generated by include.
The goal here is to understand how dependency injection works under the hood and also to become aware
of all the configuration options that we have.
Let's then start writing our provider.
As we have discussed, our provider is simply a function that we need to pass to the angular dependency
injection system, and that function is going to be called by the dependency injection system and it's
going to provide the dependency that is needed.
So in this case, we want to create the function that returns.
Accorsi service dysfunction then needs to call here the new constructor on coarsest service, and it
needs to provide with its own dependencies the dependency that we need.
Here is the EVP client.
So that's what we need to pass in here.
Let's say that these HTP client comes from a parameter that we pass to the provider function.
So if we add it here, we will have completed the implementation of our provider function.
As you can see, it's simply a function.
It returns across the service and it calls the constructor.
That's simply what the provider is.
Now, the question is, how is the color of this function going to get the EDP dependency?
Well, let's remember that this is the dependency injection system.
So it will have the missing dependency, the ETP client, and it will be able to pass it here to this
function.
What we need to do now is to plug this function here in the angular dependency injection system.
There are multiple ways of doing that.
We are going to be using here in this case, the provider's property of the component annotation.
We are going to define here at the level of this component a provider for courses service.
Now, if we just take here our function and we pass it here in the provider's array, we're going to
get the computation error.
And this is normal because the provider function by itself is not sufficient for making here this dependency
to work.
Instead of passing the function directly, we need to pass in a configuration object.
And in this configuration object we are going to define at the level of the dependency injection system.
What exactly are we providing these means that we need to give our course a service dependency and name
a dependency injection unique name.
These unique name of the dependency is known as an injection token.
So let's define here.
When we are going to give it a name, we are going to call it courses service.
This is the name of the unique dependency injection token associated to the courses service dependency.
And we are going to instantiate the token.
We are simply going to call the constructor of this type that is provided by ANGULAR.
It's called injection token.
So the injection token is a unique identifier for a dependency.
Each dependency has its own unique injection token.
The injection token takes a parameter type and this is the type of the dependency being injected.
So we are going to have here Kersee service that the dependency link to these dependency injection token
now in the constructor, we need to pass in here a string.
This is a unique string that uniquely identifies these dependency.
We are going to call it causes underscore service.
Now that we have here our dependency injection token, we can now configure the dependency injection
system.
We are going to say that we are going to provide the dependency for these Tolkan.
So with these, we have uniquely identified the dependency that we are configuring and now we just need
to pass in our provider function in order to pass in the provider function.
We need to populate here these use factory properties.
We are going to cover the other properties too.
This is the one that we need to use to pass this function to the angular dependency injection system.
So as you can see, our code is now compiling correctly.
So let's review what we did here.
In order to solve this error, we need to pass a function to the dependency injection system so that
ANGULAR knows how to create a coarsest service.
That's what's going on here.
We have created here our provider function that simply creates the dependency that is needed here in
the constructor.
Each dependency in the dependency injection system needs to have a unique name.
So we have created one here.
This is known as an injection Tolkan.
The injection token is like a unique identifier for a dependency.
So after.
Having here the dependency identifier and after having here the factory function, we have then informed
Angular how to create a service by specifying these two things, the unique token for the dependency
and the factory function that Angular can call in order to get here Accorsi service.
And with these, we have here our first attempt of writing our own provider.
So if we maltravers out, we are going to notice that we still get an error, can resolve all parameters
for causes service provider.
So the dependency injection system at this point, it's trying to call the factory function in order
to create the causes service.
That's what it's trying to do.
But the problem is that it does not know how to get here.
This EDP dependency ANGULAR cannot inspect the parameters of the function and determine what the penalties
are needed.
Instead, we need to provide here the dependencies ourselves.
We need to use here another property called dependencies.
So this is an array that is going to take here the multiple dependencies needed by the course service
provider function.
In this case, we need here the EVP client.
So if we now try these out with the dependency field in, we are going to see that we get a different
error.
So we no longer have here the same error, mentioning that we did not know how to fix this dependency
here.
Instead, we get again the same error that we saw initially.
No provided for this service, but we just wrote the provider and we know that the dependency injection
system can call it with the EDP dependency and get the dependency.
So what is going on here?
It's very simple.
What's going on is that here there is no way for Angular to link this request here for a coarsest service
instance to these particular injectable that we have configured here here in the constructor.
We are just asking here for an instance, of course, this service, but we are not seeing anywhere
that we need the dependency link to this unique injection token.
Let's remember the injection token is what uniquely identifies the dependency, and that's what we need
to use in order to get a dependency.
We need to request it via its injection token in order to identify the correct injection token.
We are going to add here an extra decorator is called at inject.
And here inside the decorator, we are going to specify the name of the injection token that we need.
We need to do this here at the level of the application component class.
And we also need to do it here at the level of the card component.
So we have export it here, our courses, service injection token.
So if we now switch here to the card component, we are going to again apply that, inject the decorator
and we are going to specify that we want the courses service injection token with is in place.
We are now ready to try out our application and this time around everything is working again as expected.
So with this provider that we wrote here manually, we managed to inject the courses service everywhere
that it was needed.
Let's now quickly summarize everything that we learned in this lesson so we know the dependency injection
system is what allows ANGULAR to inject the dependencies here in the constructor.
Every dependency has internally an injection token, which is like a unique identifier for the dependency
and a provider factory function that is called in order to create dependency.
Even when we don't write these things ourselves, Angular is applying some defaults and it's doing exactly
that under the hood.
It's creating either an injection token implicitly or it's creating a provider function implicitly.
We are just not aware of it directly.
But that's what's going on under the hood.
After configuring the angular dependency injection system with a provider like we have done here, we
then need to specify whenever we need the dependency.
What is the injection token that we need?
Notice that before our version of the application was much simpler, we didn't have here a provider
function.
We didn't know about injection tokens and we didn't have to write our own providers or specify the injection
token.
Let's go back step by step from these more complex example to that simplified scenario and understand
how angular is making the dependency injection work under the hood.
This is coming right up in the next lesson.