0:00
[MUSIC]
In the previous lesson, we learned about the HTTP support within Angular,
and how we can make use of it to communicate with the server.
We also saw that we needed to explicitly load error handling within our
application when we are communicating with the server.
We just learned in the previous lecture about the REST API and
how the REST API provides a standardized approach for
constructing the server side API which can be accessed from the client side.
Now, within Angular, how do they communicate with a server that supports
the REST API in a more meaningful way than simply using the HTTP get,
put, post, and delete methods that we did in the previous lesson?
That would be a question that should arise in your mind?
With Angular JS earlier, it had a built in service called as a resource that enabled
you to do more meaningful communication with a server that supports REST API, so
it took care of a lot of the work in terms handling errors and so on.
And also provided additional features that enabled you to,
Do set up of the HTTP message headers and so
on from within your Angular application.
Similarly, there were many third party libraries that also
supported Rest API communication from an angular based application.
And one of the most popular ones among them was Restangular.
1:47
With the new angular framework, the framework
itself comes with no explicit service or library for
doing communication with a Rest API server.
Instead, they expect you to rely on the HTTP support within the angular framework.
Now, the Restangular team has come forward with
a new version of their Restangular NPM module meant for
Angular 2 and higher versions of Angular.
So in this exercise, we're going to leverage the Restangular MPM module,
to enable us to do meaningful communication with the server.
The Restangular module is a very comprehensive module, and
it has many features.
We're going to explore just the basic features of the Restangular module in this
exercise.
The basic features, in terms of communicating from your
Angular client to the server, that supports REST API.
To get started with using Restangular at the prompt
type npm install --save ngx-restangular and
let that get installed within your Angular project.
3:18
Once that is installed, then your angular partition is now ready
to make use of the NGX Restangular module within your angular partition.
I prefer to set up a separate TypeScript file with
the rest configuration built in there.
So that what would provide a single point where we can do the configuration
off our angular application for communicating with a rest API server.
So to do that, I will go to the shared, Folder,
and then create a new file there
named restConfig.ts.
So inside the restConfig.ts I'm going to setup a few things that enable us to setup
their basic configurations for Restangular to be used within our application.
So I will first import the baseURL that we
have configured earlier in the previous
exercise into this application.
And so this is in the baseurl file
right with them this shared folder.
And then now I will configure a function
called RestangularConfigFactory, and
it takes a parameter (RestangularProvider)
which we will configure a little
bit later within our app module.
And this will supply, For
the Restangular provider.
We'll say setBaseUrl, so
you'll see that you are configuring the baseURL for
the, Restangular module.
And this is where you configure the REST API server root to
enable your Restangular module to communicate with the REST API server.
Now, we'll switch to the app.module and
then make use of Restangular with our app module.
So we need to import Restangular into our app module.
So I'll say import, { RestangularModule }.
Make sure that you spell things correctly otherwise,
6:47
shared, Rest Config.
Now the way we configure a Restangular module
is that we will now go into the imports here and
within the imports,
we're going to add in the RestangularModule and
then supply forRoot and this takes as a parameter,
the RestangularConfigFactory.
So that is how you configure Restangular within your Angular applications.
So you say, within the imports,
RestangularModule.forRoot(RestangularConf- igFactory).
Now, this is from the Restangular documentation.
You can learn how this has to be done.
So now your Angular application is configured to
make use of the Restangular module.
Now we're going to go to the dish service and then update it to make use of
the Restangular module, in order to communicate with the rest API server.
So going to the Dish Service.
Within the Dish Service,
I'm going to import the Restangular and RestangularModule.
So let me just go to the app module here.
And then copy this line which says,
RestangularModule, and Restangular from here,
and then go back to that Dish Service and paste that line right there.
So in the constructor, instead of using HTTP now, I'm going to make
use of, Restangular here.
9:18
module works is that it takes care of all this processing for you,
and simplifies this processing so we can say this.restangular.
And when you need to access, A REST API endpoint,
you supply the REST API endpoint like this dishes here.
So this means that this particular call will access localhost:3000/dishes,
that is the REST API end point that is going to access.
And we're going to fetch all the items from there.
So I will say getList is a method that it provides.
So this is going to go and fetch an array of items from this particular.
So as you see, when you configure your REST API if you supply this
as the REST API end point without the ID,
then that means that it's going to return a collection of items there.
Or an array of JavaScript objects there which works very well for
us because it's going to return an array of dishes object.
And that I simply pass as an observable.
And then I will pass it on to my application.
If this call is also in error, that error will also be passed in Restangular to us.
And then it can be passed back to our application, so the observable throw and
all that is already taken care of by the Restangular application.
So you see that your code gets a lot more simplified in this particular example.
Now, if you are communicating with an endpoint with the REST API
endpoint where you specified ID as one of the parameters.
In that case, the method that you're going to be using is again,
replace this whole thing and say this.restangular.
And then you will say one and this one will take as parameters.
The first parameter would be dishes and second parameter is
the id which comes in as a parameter to the getDish method.
So this means that this is accessing localhost:3000\dishes\id.
So this is the route parameter that you're passing along to the server here.
Now when you learn the Exspa Space Server in the last course of this specialization,
we will deal with how we set up these things on the server side,
to support the radius REST API end points.
So the dish's ID and then in this case this will return only one item,
so I just need to do a get for that.
So this will return one item from the server side.
Now if you are doing a query on an endpoint like this,
then it becomes a bit more interesting way for configuring for us.
So I'm going to retain this map here, and
I'm going to update this map method in a short while.
So I'll keep that map method, and then this.http.get
we're going to do restangular and we will say all.
And this would be dishes here.
So this restangular all dishes.
And then if you are, Doing a,
13:10
Query parameter the way that is supported in Restangular is that
to the getList you can supply a JavaScript object like this,
so featured true, JavaScript object for the getList here.
So which means that this will fetch only rows for
which this particular value is in the items.
So this will, again, return me a collection of items from the server side.
And so this will be JavaScript object array.
So from the object array, I just need to, and also the way we have configured
our data it'll return only one item but that will be in the form an array.
So taking that array, which comes in as dishes here,
I'm going to use an array function to just map that and
return only the first element from that array.
So does it return a single dish?
And that matches the way we design the getFeaturedDish here.
14:25
Just like we did with the HTTP, we did the map and
inside there we did square bracket 0 to send out the first element from the array.
So that the same approach that we're using here.
Now for the getDishes there is no need for
updating this here because this is simply a getDish ID because this is simply
using getDishes which is already updated to use the Restangular earlier.
So with this update to the Dish service, now my Dish Service is
configured to make use of Restangular in order to communicate with
my JSON server which is already supporting REST API from the start.
So, with these changes, let's save all the changes to our application,
and then we'll go and take a look at the application in the browser.
Going to the browser, you would notice no difference within your
application Except that now it is using Restangular in order to
communicate with your service that is supporting the REST API.
So all this functionality will look exactly the same as before.
Let's see how errors are handled.
So I'm going to go and cause a minor change in the Dish Service.
Switching to the Dish Service here for
the getDish method instead of doing dishes, I will simply say dishees.
And obviously, this is the wrong Rest API endpoint, but let's see what it does.
Going to the browser you now see that Restangular is
automatically handling the errors if they arise.
So in this case Restangular is reporting this particular string as the error.
So this is more meaningful here, it says Response with status 404 Not Found for
URL localhost:3000/dishes0, interesting.
Let me go back to my Dish Service and then correct the mistake that I've made,
so that my Dish Service is correct.
Now, I'm going shut down the server.
16:41
Going to the terminal, let me shut down the JSON server.
And we'll see what Restangular returns as the error
string when it tries to access the server.
Going to my application in the browser, you can now see that it is reporting this,
saying Response with status: 0 for URL: null.
So which means that it is not able to access the server at this moment,
because we just shut down the server.
So you'll notice how Restangular is able to deal with errors automatically and
be able to deliver meaningful messages to you when it encounters errors.
With this, we complete our exercise.
In this exercise, we used a third-party module called as Restangular within our
Angular application.
The Restangular module provides us with a package REST API
access which enables us to communicate with our REST API server.
And correspondingly our angular applications services
a code has become a bit more simpler in this exercise.
With this, they complete this excercise.
This is a good time for you to get comment with the message rest.
[MUSIC]