Hello, everyone, and welcome back.
Please listen, we are going to continue the implementation of our courts, this service.
So what is the purpose of this service class?
This class is going to gather a series of commonly used, cursorily related operations that are useful
throughout the application.
For example, this code that we have here for fetchingly list of courses from the back end.
This is something that might be useful in several other components of the application other than the
application component itself.
So if we would like to get the same data elsewhere, we would need to repeat this code instead of doing
that.
What we're going to do is we are going to move this functionality to a service, the courses service
that is going to provide to the view, such as the application component and observable based APA,
where internally we are fetching the data using our HTP client.
Let's see what this would look like.
Let's first switch here to the courses service and start defining the API of our service.
So these APA will start by having a method called Lulworth courses.
And the return type of these courses method is going to be unobservable, of course, array.
These means that the values submitted by the observable return by lower courses will be instances,
of course, array.
This is the same type of observable that we have here written by the HTP get coal.
So let's start by injecting here the ETP client directly in our courses service.
As we can see, it's available anywhere in the application where we need it.
Now what we're going to do is we are going to take this goal and we're going to move it here inside
because this service we are going to define here our parameters and we are going to return these observable
here generated by the ETP, get Cole to the color of lower the courses.
So our application component will no longer have a direct dependency towards the HTP client.
It will only have a dependency towards the courses service.
Now we can obtain the same courses observable that we were obtaining here by calling courses, service
dot load courses and notice that we don't even need here these parameters.
So this code for fetching data from the weekend is now nicely packed in this function and can be easily
reused elsewhere on the application where we need it.
Let's try this out.
We are going to lower the application and as we can see after these refactoring, our application is
still working as expected.
As we can see with these refactoring, we have moved all the HTP specific logic to one central service,
making it very easy to call the same ERP operation in multiple parts of the application and also abstracting
away the implementation detail, which is the ETP client itself.
This component here only knows that the data is getting returned via an observable, but it does not
know where the data came from.
If it came from a backend, from a browser cache, these component is not aware of that.
It simply knows that when the data is available, it's going to be emitted and received by the component
via the observable.
As you can see, isolating the logic in a custom injectable service is a good pattern to adopt in our
applications.
Our code at the level of our components, such as the application component, is going to become much
more readable because a call to a method like, for example, load courses is much more descriptive
than a typical.
Besides the readability aspect, these logic might also be needed in several components of our application.
So moving it into a common shared service is a great way of reusing the logic across components.
Let's now continue the implementation of our courses service.
We are now going to show how to use the HTP client to not only fetch data from the backend, but also
to modify it.