As we have already learnt in the previous lesson,
HTTP protocol enables us to communicate between a client and a server.
We have seen some details about the HTTP protocol already in the previous lesson.
In this lesson, we're going to explore Angular support for HTTP.
Angular supports HTTP through the Angular HTTP client.
We will look at how we can leverage
the Angular HTTP client for client-server communication,
in our Angular application.
The two exercises that follow this lecture,
we'll explore the practical use of
the Angular HTTP client within our Angular application.
Let's look at a little bit of the details of the HTTP client in this lecture.
As we would expect,
Angular leverages the HTTP protocol to enable communication between
our Angular client and the HTTP based server.
Most modern browsers, typically used to support
the XMLHttpRequest or the XHR way of communicating with the server.
Increasingly, the browsers are adopting the Fetch API,
which is a modern replacement for XMLHttpRequest as
a way of providing communication between the browser and the server.
Angular leverages this for communicating with the server using the HTTP client.
We will look at the use of the HTTP client and how we can use HttpClientModule,
within our Angular application to enable Client-Server Communication.
Any communication between the client and the server as we expect,
is going to be asynchronous in nature.
So, which means that your client needs
to wait for the data to be delivered from the server site.
Consequently, your client needs to be
configured to deal with this delay in obtaining the data.
In the previous module itself,
we had already configured our client applications to
be able to show the progress spinner on the UI,
to keep the user informed about the fact that there is a delay in obtaining the data,
before the view is rendered.
That comes to our aid in this lesson,
where we obviously have to deal with the delay for obtaining data from the server site.
The data access within our Angular application,
it is always better to delegate this responsibility to the service.
So, we let the service deal with the interaction with the server,
and then your component obtains the data by calling the methods of the service.
The component service interaction we have already set up in the previous module.
So, all that we need to do,
is to update our services to leverage the HTTP module to communicate with the server,
to obtain the data from the server and then thereafter,
supply the data to the component.
The HTTP server itself,
will return the data to our client and
our HTTP module returns the data to our service in the follow up observable.
This observable, will be then processed and
then returned as an observable to our component.
That part we have already setup in the previous module.
So, we will leverage that to enable us to quickly
slipping the HTTP communication between the client and the server,
between the service and the server site,
and then the rest of the infrastructure
that is already in place in our Angular application
can easily deal with the delivery of the observable to our component,
and the component already subscribing to that observer.
The additional effect that we will deal with,
is how to handle errors.
We'll talk about that in a little more detail in the later slides.
So, as I already mentioned,
the HTTP client returns an observable.
So, when you call the HTTP module,
so you will set up your service to make use of the HTTP module,
and with the HTTP module,
it provides you with several methods which match the get,
put, post, and delete verbs of the HTTP protocol.
So, the get, put, post,
and delete methods are automatically supported by the HTTP module.
So, you will leverage these methods to be able to execute
those particular operations on the server site.
So, when you issue an HTTP get call,
you're requesting for data to be delivered from the server to the client.
The HTTP client in turn,
will process the observable that is delivered through the Angular HTTP module,
and then deliver that observable to our component.
Within our component, we already subscribe
to the observable that is delivered by our service,
and so handling the data that is sent through the observable,
is fairly straight forward for us.
If the Angular application is
communicating with a server that is returning the response in JSON format,
the Angular HTTP clients get method itself
parses the server's JSON response into an anonymous object.
The client itself, doesn't know exactly how to interpret the shape of this object.
So, we can aid the HTTP client by specifying the shape of the object,
by specifying a declaration of a JavaScript class,
which specify the shape of the object so that the output
from the get can be consumed easily by the application.
So, in the exercise,
you will see me declaring.
For example, we will say this.http.get,
and then within angular brackets,
I specify dish there.
So, that way,
the incoming data for the get request from the server site will be converted into
a dish object and then can be consumed immediately
by my component when it is laying out the content.
Now, if you require,
you can get access to the complete response coming in from the server site.
But that would be only under specific circumstances,
where you need access to for example,
the headers of the incoming HTTP response message and so on.
But for most purposes,
just by declaring the shape of the object,
we can easily get the JSON data automatically parsed into a way
that can be consumed by our Angular application more easily.
As we expect, communication
between the client and the server is not going to be error free.
Errors are going to crop up for many different reasons.
It may be that the connection doesn't get established between the client and the server,
it may be the fact that the reply from the server gets lost,
it may be the fact that the server is unable to find the data that you're looking for,
and so returns a 404 indicating that the server
is unable to provide the data for you or missing data on the server site, and so on.
So, your client needs to deal with all these errors.
So, within our service,
we're going to configure our service to be able to catch this error.
So, this is where the use of the catch method that is supported by the HTTP,
enables us to catch the error, process that error,
and then send the error message to our component,
and then let the component deal with the error message in
whatever way it seemed appropriate.
Now, within our component for example,
we will display the error information that we
obtained in our view to indicate to the user,
that an error occurred in obtaining the data from the server site.
So, within the service,
we need to process this error.
Now, when this error information obtained from
the server site through the HTTP client is processed within our service,
then we will convert that to a string,
and that string will be passed to our component by using the observable throw method.
So, the throw method allows us to throw an error.
Then because in our component we
subscribe to this observable within the subscribe method,
then you need to deal with the error.
So, in the subscribe part,
earlier we have seen only one function being specified for the subscribe,
and that deals with the normal operation.
But together with that,
we can also provide a second function to which the error will be delivered.
So, you will see me configuring the subscribe part of my component
using a second function specified within the subscribe method there,
as an example illustrated by this code here.
That way, the error will be caught within
my component and then appropriate error message,
information will be delivered to the user within the view.
So, we will see that as part of the second exercise in this particular lesson.
With this quick understanding of the HTTP client,
we will now move on to the exercises where we will employ
the Angular HTTP client provided through the HTTP module of the Angular HTTP library,
to enable us to communicate with our server.