Hello, everyone, and welcome back.
In the last lesson, we saw how to use a built in angular service HTP client, as you can see, we just
injected here in our constructor and we have access here to an EPA that we are going to do now is we
are going to create our own custom angular service.
This is going to be a custom angular service that we are going to write ourselves from scratch.
Let's then see what an angular custom service looks like.
We are going to head over here to our terminal and we are going to quickly scaffold a new service by
running the following command and generate.
We are going to use the service template and we're going to place the service in a service folder.
This is going to be the course service.
This scaffolding command is going to generate here a couple of files.
Let's have a look here at the courses service file.
So as you can see, this is a plain typescript class where we have added here an injectable decorator.
This means that this service here is injectable in our component, just like the HTP client going back
here to our coarsest service.
You can see here that inside the injectable decorator we have here are provided in property.
We are going to cover in detail what this property means later in this course.
Right now, what is important to retain is that this is an injectable service that is compatible with
the angular dependency injection system.
Let's talk a bit about dependency injection.
So as you can see, our class here does not have to create its own dependencies, such as, for example,
ETP client.
This depends on the atypical end because it needs it internally in order to preform some of its functions.
Now, the class will not create the HTP client.
The class will be provided the ETP client via the constructor.
Notice that the class does not know where the HTP client is coming from, how it was created, and it
doesn't even know if this is a test implementation or if it's the real HTP client.
All that it knows is that somehow this dependency was created and it was provided to the class via the
constructor.
So the class does not create its dependencies.
It gets them injected via the constructor that is called dependency injection.
ANGULAR has a powerful dependency injection system that we are going to cover it in detail in this course.
This configuration property here means that we should create an instance of the service and only one
instance, of course, is service and have it available at the root of the dependency injector.
This means that there will be only one instance available for the whole application.
If we head over here to our application component, we will see that we can even already inject this
dependency here in the constructor.
Let's try this out to see if this is working.
We simply have to add here the courses service type annotation and this is all the information needed
by ANGULAR in order to be able to inject here an instance, of course, this service.
Let's then confirm that this is working.
We are going to log here to the console the value of this service.
If we know reload the application and we open the console, we are going to see that indeed we can see
here.
An instance, of course, is service injected via the constructor.
Now, notice the following if we need here discuses service elsewhere, such as, for example, here
in the course card component, we can add it here as a dependency in the constructor.
Let's not confirm that the car service is also available for injection at the level of the course Garthe
component.
Let's now refresh the browser and try these out.
We have here several logging statements.
We have one coarsest service logging statement for the application component.
And then we have here multiple logging occurrences of this line here, one for each character in our
application, because as we can see, we have here multiple cards.
Now, the question is, are these different instances of the courses service class or is this all the
same instance due to our configuration here provided in root, we are sharing only one instance, as
we have discussed.
And the best way to confirm this is to have here some logging at the level of the constructor.
We are going to log here simply creating this service and we are going to run these and see what we
get in the console.
The first statement that we would expect to see here is the creation of the service, and that is indeed
the case.
So here the constructor was called and again, it was called by angular and not by our application code.
And we have here the injection of the application component courses service, which is the same instance.
As the one that is getting injected here at the level of each Korsakov, the constructor, as we can
see on the log, was only called once, which confirms to us that there is indeed only one instance.
Of course, this service, these type of service is known as an application.
Singleton Singleton simply means that there is only one instance.
So now that we have here the skeleton implementation of our Cursi service and that we have an initial
understanding of how dependency injection works, let's continue the implementation of this service.
We are now going to see how can we implement our backend goal using this class.