Hello, everyone, and welcome back.
Let's get started learning angular injectable services, and the first thing that we are going to do
is we are going to learn how to use an already existing angular built in service.
Later on, we are going to learn how to build our own custom services.
The service that we are going to use is the angular HTP service that we are going to be using to fetch
some data from the back end.
In order to use a service, you can simply inject it into our class via the constructor.
We simply have to declare here a reference to the service and Angular will know when it instantiates
this class that it needs to provide this dependency.
We're going to declare this as the EDP member variable and we are going to define here the type of the
HTP variable.
We're going to define it as being of type HTP clients.
HCB client is the angular HTP service.
Later in this course, we are going to learn how to build our own custom services.
Right now, let's see how can we use this service?
And the good place to use it is this engie undenied method.
This is another life-cycle hook that we are introducing here, Engy, and in it is the best place to
put some initialization logic, such as, for example, triggering an ECB Wacken call that is going
to fetch the data that these component needs.
This is a life-cycle hook, which means that this method is going to be called by the angular framework
itself and not by us directly.
This is not meant to be called from the application called in order to instantiate the application component
less angular is going to invoke the constructor and pass the multiple dependencies once that is done.
The next thing that ANGULAR is going to do is to call this method.
So in this method of envisioning it, we are sure that you already have here something present.
So this means that these engie on init method will already have available the EDP member variable because
it's called after the constructor.
Let's have a look to see what can we do with the HTP method.
We can, for example, do an HTP get we are going to pass in here the warrell that we want to hit in
our Backlund and we're going to use Agapa courses.
Notice that what we get back here in our target method is going to be unobservable.
So if we tried this out, just like it's nothing will happen because it's unobservable, we need to
subscribe to it in order to trigger it.
So let's do that.
We are going to call here the subscribed method and we're going to arrive here a success handler.
So this is a function that is going to get us back the value returned by the API call to slash courses.
Let's quickly log it out to the console.
We are going to log out here the value and before trying anything else, let's see how this is working.
We are going to refresh the application and we're going to open here our console to see that indeed
we have here an array containing 10 courses as expected.
So this data came here from the back end and not from these hard coded data that we have assigned here
to the courses member variable.
Let's now, instead of locking out these values to the console, let's pass these values here to the
courses member variable.
So initially we are going to leave it undefined.
This means that whenever we loop here through the array of courses, nothing is present and we get here
a blank screen.
And if now here in our Subscribe Success Handler, we take these value, which is the array of courses
and we assign it here to the courses member variable.
We are going to see that again.
We get here some data on the screen.
But this time around the data comes here from these HTP requests and not directly from hardcoded value,
just like we were doing so far.
And with this, we have completed our first EVP requests since we are doing here aget requests.
Let's take a moment to see how could we add the get parameters to it.
So in order to have parameters to a request, we are going to define here and you constantly are going
to call it Purim's and we are going to instantiated using the angular ENTP Prem's utility class.
Now this class has an immutability base dippie if we want to change here, the parameters that are being
passed, which is currently no parameters at all, we need to call here the set method.
Now let's have here initiatory parameter.
So this is the name of the parameter that is going to show up on the query string.
Let's say that we would like to get page number one of the list of courses willing to pass in here.
The value this should be a string.
So we are going to pass here, number one, and let's say that we will like to arrive here a second
parameter.
In that case, we are going to call set here again.
Let's say that the second parameter is page size and we want the first 10 courses.
So we have here a set of HTP parameters.
We simply.
I have to pass them to this get coal here in the second argument of the get requests.
So we are going to pass in here an object this object can have here multiple properties, including
here, the Purim's property that we are filling in with the constant.
Let's now try these out.
We are going to switch to a larger window and we are going to relocate here.
The application we have here to the chrome that tools opens and we are filtering here for Asia calls
only.
So here is the Ajax call that is being made by our application.
And we can see here on the request you are ill that we are indeed accessing here AP courses and we have
here the parameters, page one with page size 10.
So as you can see, everything is working as expected.
Let's not talk about some other features of the angular built in HTP client.
We are going to talk about a better way of passing the data to our template using the async pipe, and
we're going to learn how to build our own custom services.