In this exercise, we're going to make use of the Angular HTTP Client to
communicate with the JSON server that we have already setup in the previous exercise.
We will be able to now download data from the server to our angular application using
the HTTP client and then make use of the data in order to
construct the various views within our components.
In this exercise, we're going to reconfigure the dish service to be able to
go and fetch the data about the dishes from the JSON server.
As part of your assignment,
you will complete the remaining two,
the leader service and the promotion service.
We'll see how we can leverage the HTTP client which will return an observable to us.
We have already reconfigured our application,
especially the service to be able to deliver observables to our components.
Within our components, we are subscribing to these observables.
So, the major part of the setup
for obtaining data from the service to the component is already there.
We will enhance it a little bit to deal with errors in the next exercise.
Our first step in preparing the Angular application to use
the HTTP client to access the server is to
configure our application with the HTTPClientModule.
So, to do that, open app.module.ts.
Then, in here, let's import
the HTTPClientModule from angular/common/HTTP.
Once we import that,
then we'll go ahead and configure the NgModule decorator
in the imports with the HTTPClientModule.
Now, our application is ready to make use of the HTTPClientModule to access the server.
Now, make sure that the JSON server is up and running and
serving up the data so that our application can
communicate with the JSON server application.
Now that we are accessing data from the server side,
it is a good practice to create a special value which points to
the baseURL of your server so
that it can be configured within your angular application as and when required.
So, going to the shared folder,
I'm going to create a new file here named baseurl.ts.
Then, within this file,
I will include a constant and export it and the constant named baseURL,
which I will set to HTTP://localhost:3000.
So, as you recall, this is the baseURL at which my JSON server is accessible.
So, localhost:3000/, there.
So, with this,
let me save the changes to the baseURL.
Now, angular provides a way of supplying values like
this to the rest of your application by configuring a provider within your app module.
So, going to the app module,
to enable us to provide that particular baseURL,
we're going to first import the baseURL value into our angular application.
So, I would say import baseURL from shared/baseurl.
This value can now be made available to
the rest of my application by going to the providers.
Then, in addition to the LeaderService,
if I configure a value like this,
I would say provide
and then baseURL, useValue.
So, this way, I will be supplying this baseURL value as
a value provider from within the app module to the rest of my angular application.
In the next step,
we're going to configure our DishService in order to let it access the server side,
and then obtain the data from the server side,
and then make the data available to our components.
Now, we are going to go to the DishService.
Then, in the DishService,
these dishes are no longer needed from local file there.
I'm going to download that data from the server side.
So, I'm going to remove that and then add in an import
of HTTPClient from angular,
each common HTTP,
import the baseURL from,
recall that this is in shared/baseurl.
Now, within my DishService,
I'm going to go and fetch the data from the server side.
So, in the constructor,
I'm going to update the constructor by
injecting HTTPClient into my constructor here.
So, now, my DishService should be set up to
obtain the data from the server side and return the data to my application.
Now, you notice that
the getDishes method is already set up to return the observable to the component.
So, that part is already set up.
Now, what this is going to return is what it obtains from
the HTTP get method
which we'll call the server side.
So, in order to call the server side,
I will have to supply,
within the get method,
the baseURL which I have
already obtained, and then dishes.
So, this way, the HTTP get method is going to get the data from localhost:3000/dishes.
So, that is the server-side URL from
which you can fetch the dishes data here. That is it.
My server is going to supply the data in the form of an
observable to this service when the HTTP get method is called,
and that will be returned to the component through the getDishes method.
That's about it. Now, my service is set up to go and
fetch the data from the server side and then return the data to my component.
I'm going to update the remaining methods also in a similar manner.
So, what I will do for the next method for the getDish method is,
I'm going to copy
this part and then simply paste it into place here,
and then we will edit that.
Now, when you need to obtain for a particular dish,
you have the ID of the dish that is available to you.
So, we'll say getDish ID is available as a parameter.
So, to the dishes,
I'm going to add the ID as the other parameter here.
Now, when I receive the response and then return
it to the component through the getDish method call.
Similarly, for the featured dish,
it's going to be a little bit interesting way of configuring it.
Now, for the featured dish,
when you need to access the data from the server side,
what I'm going to do is, now,
when I ask for a featured dish, now,
the way my server-side is set up is that I can send
a query parameter within my URL so I can say dishes?
and then say featured equal to true.
So, this way, my server will return
only those objects for which the featured flag is set to true,
or the featured property is set to true on the server side.
Now, this is how the server-side is set up.
Now, again, once you obtain the data,
then you simply map the value and then return that as
an observable to my component through the get featured dish method.
When I query the server side using the query parameter,
it is going to return an array of objects that match.
In this case, it so happens that the array will contain exactly one item there.
But when I return the value after obtaining the result,
I need to also include a zero there because this is an array,
so I need to return the first element from the array.
Before I forget, let me import
the map operator from rxjs operators.
Now, for the last one, the getDishIds,
what I'm going to do is leverage the fact that I already
have the getDishes method available to me.
So, when the getDishes method returns,
I'm going to map that with the map operator
as dishes.map, dish.dish id.
So, this way, I am returning just the value that I need,
just the dish ids through this method here.
That's about it.
Now, my dish service is completely updated to go and fetch the data from
the server site and then supply the data to my components in my.
Angular application here.
In the next step,
I'm going to go into the menu component.
Then within the menu component,
I'm going to use the inject interface that is available through
the angular core to inject this BaseURL that I have obtained there.
So, how do we make use of that?
Within the constructor of my component,
I will go in and say,
"@Inject" So, recall that we had set up
this BaseURL as a provider for this value in the app module earlier.
So, that BaseURL can now be injected into the component like this here.
Now, when you have a service,
you are injecting services like this here,
but when you have a value,
then you inject the value by using the "@Inject" decorator.
Here, we are specifying the provider value that we specified there.
We said, provide:BaseURL there,
so that's the value that we are supplying here.
Then, I'm declaring this as private BaseURL.
So now, within my code here,
this BaseURL is available to configure whatever I need within my application here.
While I'm still here,
I'm going to remove this selected dish that is also not being used within my application.
Then, this method also I am not using with my application,
so let me do a little bit of cleanup while I'm still here.
The way we process the data that we obtained
from the service will remain exactly the same.
Because my service is still returning and observable,
and I am subscribing to the observable within this component.
So, that part doesn't change at all.
Now, the reason why I inject the BaseURL within my component is that,
in my template here,
I am obtaining the dish image here.
Now, but this dish image needs to be obtained from my server there,
from the JSON server there.
So, I need to go in and then update this source to say,
BaseURL plus dish image.
So, I need to supply the complete URL for that image there.
So, that should be, httlp:// localhost:3000/images/, whatever.
So, that's the reason why I need to supply
the BaseURL value in addition to the dish image here.
So, this I'm going to enclose within quotes,
so that's the way an expression like this inside the interpolation will work correctly.
So, enclose this within quotes and then supply that as the source value,
and then here you see that you're using BaseURL plus the dish image,
the dish.image, the image property contains only the partial URL.
So, it contains images slash and image.png file name.
So, that's why I need to append the http://localhost:3000/,
to that dish image property so that I construct the total URL for my image.
So, with this, my menu component is now completely set up
to obtain all the data from the server side.
Now, similarly, I would suggest that you update
the dish detail component and also the home component.
Going to the dish detail component,
use the inject there,
and then going to the constructor,
in the constructor, now I need to use
inject of BaseURL and BaseURL there,
and so, my dish detail component is now set up to obtain the data from the dish service.
So, this part will no longer change,
it remains exactly the same because my dish service is simply
returning an observable and I'm subscribing to that observable here.
I also need to update the dish detail components template file,
so similarly going to the image source here,
I would add the BaseURL plus the dish image and then put that within quotations there.
Similarly, going to the home component, same thing.
I'm going to do an inject,
and in the constructor
I do an inject of BaseURL,
and going to the home components template file,
similarly where I use the dish image here,
so I'm going to say, BaseURL plus dish image,
and then enclose it within quotation marks here,
and then save the changes.
So, that's it. My application is now updated to use
the server to obtain the data for the dishes.
So, let's go and see the application in the browser.
Going to the browser,
you can now see that within my browser,
my dish is being rendered exactly as before,
and then going to the menu component,
you see that the menu renders exactly as before and the dish detail component,
also the dish details are rendered exactly as before.
So, with the change that we have introduced by accessing the data from the server side,
we are able to fetch the data from the server side and then
render the data within our Angular application.
In order to convince you that the data is actually being obtained from my JSON server,
let's go to the terminal and then see the log on the terminal window there.
Going to the terminal where my JSON server is running,
you can see that I have actually performed a bunch of Git requests
from my server site to obtain all the data that I need within my application.
So, indeed my the Angular application is now fetching all the data from
the server site for all the dishes within my Angular application.
Now, you can use the same approach to also update
the latest service and also the promotion service,
but we will defer that until the final assignment in this course,
but this may complete this exercise.
In this exercise, we have learned how to make
use of the HTTP client in order to obtain the data from
the server site and then use the data in constructing
the views within the components of our Angular application.
This is a good time for you to do a Git commit with the message HTTP part one.