[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.

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.

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,

Your application will not function correctly and

this could be pretty much sources of bugs which

are difficult to trace from ngx-restangular,

which we have already installed.

And the next thing that I'm going to import is the,

RestangularConfigFactory from,

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.

So instead of injecting HTTP I'm injecting

Restangular into my Dish Service here.

Which also means that I no longer have access to HTTP so

I need to update all the methods here.

And we're going to update all these methods to make use of Restangular.

And for the getDishes method, the Restangular

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,

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.

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.

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]

Exercise (Video): Angular and REST

Front-End JavaScript Frameworks: Angular

Rencontrer les enseignants