Start making restful API requests from Angular 4.3+  with the new HTTP client. In this lesson, I show you how to make GET and POST requests, set URL params, headers, handle errors, and more. https://angularfirebase.com/lessons/http-with-angular-quick-start/

StackBlitz Demo: https://stackblitz.com/edit/http-basics
Angular HTTP: https://angular.io/guide/http
JSON Placeholder: https://jsonplaceholder.typicode.com/
Swagger Codegen: https://swagger.io/
2024-02-04T08:02:22.684Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1e523fa1-027c-4fcd-9bed-a5fae5903e30
4d1fed9b4e2c1ffc13669f1278226224c6a797d6e59689f0a7b23e346d6cb85e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs.
By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services.
The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app.
Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server.
So here we have a client on the left and a server on the right.
Rest is simply a way for these two parties to communicate in a standardized way.
When the client makes a request, it's going to use a specific verb or method to interact with the server.
First, we'll go ahead and make a get request.
This tells the server that we only want to retrieve data and we're not going to modify it in any way.
The server will respond with the status code as well as the data that was requested.
If it was a successful request, it should be a 200 level response.
But if the request wasn't valid, it should be a 400 or 500 level error response.
A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself.
If we send a post request, we're telling the server that we intend to create new data.
When you send a post request, you also send that data payload with it, which is the data you intend to save on the server.
After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created.
In addition to get and post, you also have other verbs such as put, patch, and delete.
They all work in a similar way, just conveying a slightly different message for what you intend to do on the server.
And that's basically the gist of how REST works from a very high level.
Now let's start retrieving data from a REST wind point using Angular.
For this lesson, I'm gonna be working from a Stackblitz project.
This allows me to include a link in the description where you can run this code and fork it for yourself.
The first thing we're going to do is go into the app module and import the HTTP client module from Angular common.
Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using.
From there, we can go into the app component and import the HTTP client which works just like an Angular service.
It's injectable, so we can just add it right in the constructor.
Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using.
For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from.
So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular.
So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API.
First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable.
So we'll pass in the root URL and that should return an observable of the response from the API.
In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe.
Then I print it as a JSON object, but you could do anything you want here with the underlying data.
Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder.
So after clicking the post button, we get a response of an array of different post objects.
For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method.
So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body.
Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable.
So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface.
The return value on HTTP get is typed as an object so we need to change that to our post array.
So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point.
So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request.
It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server.
With JSON Placeholder, we can filter post by the user ID.
So So this is how we would do it if we were going to hard code the parameter.
We have a question mark followed by the parameter and equals some value.
This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string.
What we can do instead is use Angular's HTTP params class to build these parameters dynamically.
We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set.
And then we pass that as an object as the second argument to our get request.
When we send this parameter, JSON Placeholder will only return the post that have this matching user ID.
We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app.
Let's imagine that we want to send a request that can only be performed by the currently logged in user.
In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request.
So just like before we pass the headers as the second argument in the Git request.
So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular.
So now let's go ahead and send a post request where we actually modify data on the server.
So So we'll create a new variable called new post and we'll also create a new method to handle this operation.
Post is almost identical to Git.
The only difference is we send a body with the request that represents the data that we wanna modify on the server.
So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request.
So we call HTTP post to the same URL and pass it the data payload.
In the HTML we'll create another button that triggers the createPost method.
The new post variable is just a single object observable so we can get that data by calling async and JSON.
Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server.
One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it.
So let's say we wanna map the post down to just the title.
We can just throw in the map operator and then map the post down to just its title.
So if we rerun the same method, we get just the title back instead of the full object.
As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want.
You can also use RxJS to handle errors.
So in this case we'll import the catch and retry operators and also the observable of operator.
Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response.
First, I'm going to tell RxJS to retry the request 3 times if it fails.
And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable.
I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself.
So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries.
And when it fails for good, it console logs the error and displays the error object in the user facing front end.
So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular.
But there is one really cool tool I wanna show you before the end of this video called Swagger.
It's a framework for building APIs both server side and client side.
It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code.
So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right.
Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it.
You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind.
Many of the methods and concepts will be identical, but you won't be able to use this code line for line.
In any case, it should give you some good ideas and help You jump start the process of building your own front end API client.
That's it for Angular HTTP.
If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching and I'll see you next time.

Speaker 0: Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs. By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services. The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app. Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server. So here we have a client on the left and a server on the right.

Rest is simply a way for these two parties to communicate in a standardized way. When the client makes a request, it's going to use a specific verb or method to interact with the server. First, we'll go ahead and make a get request. This tells the server that we only want to retrieve data and we're not going to modify it in any way. The server will respond with the status code as well as the data that was requested.

If it was a successful request, it should be a 200 level response. But if the request wasn't valid, it should be a 400 or 500 level error response. A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself. If we send a post request, we're telling the server that we intend to create new data. When you send a post request, you also send that data payload with it, which is the data you intend to save on the server.

After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created. In addition to get and post, you also have other verbs such as put, patch, and delete. They all work in a similar way, just conveying a slightly different message for what you intend to do on the server. And that's basically the gist of how REST works from a very high level. Now let's start retrieving data from a REST wind point using Angular.

For this lesson, I'm gonna be working from a Stackblitz project. This allows me to include a link in the description where you can run this code and fork it for yourself. The first thing we're going to do is go into the app module and import the HTTP client module from Angular common. Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using. From there, we can go into the app component and import the HTTP client which works just like an Angular service.

It's injectable, so we can just add it right in the constructor. Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using. For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from. So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular. So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API.

First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable. So we'll pass in the root URL and that should return an observable of the response from the API. In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe. Then I print it as a JSON object, but you could do anything you want here with the underlying data. Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder.

So after clicking the post button, we get a response of an array of different post objects. For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method. So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body. Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable. So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface.

The return value on HTTP get is typed as an object so we need to change that to our post array. So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point. So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request. It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server. With JSON Placeholder, we can filter post by the user ID.

So So this is how we would do it if we were going to hard code the parameter. We have a question mark followed by the parameter and equals some value. This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string. What we can do instead is use Angular's HTTP params class to build these parameters dynamically. We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set.

And then we pass that as an object as the second argument to our get request. When we send this parameter, JSON Placeholder will only return the post that have this matching user ID. We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app. Let's imagine that we want to send a request that can only be performed by the currently logged in user. In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request.

So just like before we pass the headers as the second argument in the Git request. So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular. So now let's go ahead and send a post request where we actually modify data on the server. So So we'll create a new variable called new post and we'll also create a new method to handle this operation. Post is almost identical to Git.

The only difference is we send a body with the request that represents the data that we wanna modify on the server. So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request. So we call HTTP post to the same URL and pass it the data payload. In the HTML we'll create another button that triggers the createPost method. The new post variable is just a single object observable so we can get that data by calling async and JSON.

Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server. One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it. So let's say we wanna map the post down to just the title. We can just throw in the map operator and then map the post down to just its title. So if we rerun the same method, we get just the title back instead of the full object.

As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want. You can also use RxJS to handle errors. So in this case we'll import the catch and retry operators and also the observable of operator. Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response. First, I'm going to tell RxJS to retry the request 3 times if it fails.

And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable. I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself. So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries. And when it fails for good, it console logs the error and displays the error object in the user facing front end. So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular.

But there is one really cool tool I wanna show you before the end of this video called Swagger. It's a framework for building APIs both server side and client side. It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code. So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right. Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it.

You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind. Many of the methods and concepts will be identical, but you won't be able to use this code line for line. In any case, it should give you some good ideas and help You jump start the process of building your own front end API client. That's it for Angular HTTP. If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com.

You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs. By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services.
internet
The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app. Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server. So here we have a client on the left and a server on the right. Rest is simply a way for these two parties to communicate in a standardized way. When the client makes a request, it's going to use a specific verb or method to interact with the server. First, we'll go ahead and make a get request. This tells the server that we only want to retrieve data and we're not going to modify it in any way. The server will respond with the status code as well as the data that was requested. If it was a successful request, it should be a 200 level response. But if the request wasn't valid, it should be a 400 or 500 level error response. A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself.
If we send a post request, we're telling the server that we intend to create new data. When you send a post request, you also send that data payload with it, which is the data you intend to save on the server. After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created.
data
In addition to get and post, you also have other verbs such as put, patch, and delete. They all work in a similar way, just conveying a slightly different message for what you intend to do on the server. And that's basically the gist of how REST works from a very high level. Now let's start retrieving data from a REST wind point using Angular. For this lesson, I'm gonna be working from a Stackblitz project. This allows me to include a link in the description where you can run this code and fork it for yourself. The first thing we're going to do is go into the app module and import the HTTP client module from Angular common. Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using. From there, we can go into the app component and import the HTTP client which works just like an Angular service. It's injectable, so we can just add it right in the constructor. Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using. For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from. So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular. So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API. First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable. So we'll pass in the root URL and that should return an observable of the response from the API. In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe. Then I print it as a JSON object, but you could do anything you want here with the underlying data. Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder. So after clicking the post button, we get a response of an array of different post objects. For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method. So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body.
Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable. So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface.
programming
The return value on HTTP get is typed as an object so we need to change that to our post array.
So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point. So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request.
programming
It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server. With JSON Placeholder, we can filter post by the user ID. So So this is how we would do it if we were going to hard code the parameter. We have a question mark followed by the parameter and equals some value. This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string. What we can do instead is use Angular's HTTP params class to build these parameters dynamically. We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set. And then we pass that as an object as the second argument to our get request. When we send this parameter, JSON Placeholder will only return the post that have this matching user ID. We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app. Let's imagine that we want to send a request that can only be performed by the currently logged in user. In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request. So just like before we pass the headers as the second argument in the Git request. So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular. So now let's go ahead and send a post request where we actually modify data on the server. So So we'll create a new variable called new post and we'll also create a new method to handle this operation. Post is almost identical to Git. The only difference is we send a body with the request that represents the data that we wanna modify on the server. So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request. So we call HTTP post to the same URL and pass it the data payload. In the HTML we'll create another button that triggers the createPost method. The new post variable is just a single object observable so we can get that data by calling async and JSON. Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server. One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it. So let's say we wanna map the post down to just the title. We can just throw in the map operator and then map the post down to just its title. So if we rerun the same method, we get just the title back instead of the full object.
As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want. You can also use RxJS to handle errors. So in this case we'll import the catch and retry operators and also the observable of operator.
programming
Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response. First, I'm going to tell RxJS to retry the request 3 times if it fails. And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable. I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself. So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries. And when it fails for good, it console logs the error and displays the error object in the user facing front end.
So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular. But there is one really cool tool I wanna show you before the end of this video called Swagger. It's a framework for building APIs both server side and client side.
youtube
It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code. So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right. Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it. You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind. Many of the methods and concepts will be identical, but you won't be able to use this code line for line. In any case, it should give you some good ideas and help You jump start the process of building your own front end API client.
That's it for Angular HTTP. If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
books
publishing
youtube
literature
Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs. By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services. The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app. Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server. So here we have a client on the left and a server on the right. Rest is simply a way for these two parties to communicate in a standardized way. When the client makes a request, it's going to use a specific verb or method to interact with the server. First, we'll go ahead and make a get request. This tells the server that we only want to retrieve data and we're not going to modify it in any way. The server will respond with the status code as well as the data that was requested. If it was a successful request, it should be a 200 level response. But if the request wasn't valid, it should be a 400 or 500 level error response. A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself. If we send a post request, we're telling the server that we intend to create new data. When you send a post request, you also send that data payload with it, which is the data you intend to save on the server. After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created. In addition to get and post, you also have other verbs such as put, patch, and delete. They all work in a similar way, just conveying a slightly different message for what you intend to do on the server. And that's basically the gist of how REST works from a very high level. Now let's start retrieving data from a REST wind point using Angular. For this lesson, I'm gonna be working from a Stackblitz project. This allows me to include a link in the description where you can run this code and fork it for yourself. The first thing we're going to do is go into the app module and import the HTTP client module from Angular common. Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using. From there, we can go into the app component and import the HTTP client which works just like an Angular service. It's injectable, so we can just add it right in the constructor. Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using. For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from. So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular. So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API. First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable. So we'll pass in the root URL and that should return an observable of the response from the API. In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe. Then I print it as a JSON object, but you could do anything you want here with the underlying data. Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder. So after clicking the post button, we get a response of an array of different post objects. For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method. So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body. Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable. So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface. The return value on HTTP get is typed as an object so we need to change that to our post array. So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point. So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request. It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server. With JSON Placeholder, we can filter post by the user ID. So So this is how we would do it if we were going to hard code the parameter. We have a question mark followed by the parameter and equals some value. This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string. What we can do instead is use Angular's HTTP params class to build these parameters dynamically. We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set. And then we pass that as an object as the second argument to our get request. When we send this parameter, JSON Placeholder will only return the post that have this matching user ID. We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app. Let's imagine that we want to send a request that can only be performed by the currently logged in user. In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request. So just like before we pass the headers as the second argument in the Git request. So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular. So now let's go ahead and send a post request where we actually modify data on the server. So So we'll create a new variable called new post and we'll also create a new method to handle this operation. Post is almost identical to Git. The only difference is we send a body with the request that represents the data that we wanna modify on the server. So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request. So we call HTTP post to the same URL and pass it the data payload. In the HTML we'll create another button that triggers the createPost method. The new post variable is just a single object observable so we can get that data by calling async and JSON. Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server. One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it. So let's say we wanna map the post down to just the title. We can just throw in the map operator and then map the post down to just its title. So if we rerun the same method, we get just the title back instead of the full object. As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want. You can also use RxJS to handle errors. So in this case we'll import the catch and retry operators and also the observable of operator. Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response. First, I'm going to tell RxJS to retry the request 3 times if it fails. And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable. I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself. So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries. And when it fails for good, it console logs the error and displays the error object in the user facing front end. So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular. But there is one really cool tool I wanna show you before the end of this video called Swagger. It's a framework for building APIs both server side and client side. It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code. So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right. Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it. You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind. Many of the methods and concepts will be identical, but you won't be able to use this code line for line. In any case, it should give you some good ideas and help You jump start the process of building your own front end API client. That's it for Angular HTTP. If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
Mastering
mastering
the
the
basics
basics
of
of
Angular's
angular's
HTTP
http
module
module
will
will
open
open
up
up
the
the
door
door
to
to
interact
interact
with
with
thousands
thousands
of
of
exciting
exciting
web
web
based
based
APIs.
apis
By
by
the
the
end
end
of
of
this
this
lesson
lesson
you'll
you'll
have
have
the
the
basic
basic
tools
tools
you
you
would
would
need
need
to
to
do
do
things
things
like
like
request
request
weather
weather
data,
data
stock
stock
quotes,
quotes
nutrition
nutrition
facts,
facts
as
as
well
well
as
as
interact
interact
with
with
major
major
platforms
platforms
like
like
Facebook,
facebook
Twitter,
twitter
and
and
Amazon
amazon
web
web
services.
services
The
the
one
one
thing
thing
these
these
products
products
all
all
have
have
in
in
common
common
is
is
that
that
they
they
provide
provide
a
a
RESTful
restful
API
api
that
that
you
you
can
can
consume
consume
from
from
your
your
Angular
angular
app.
app
Before
before
we
we
jump
jump
into
into
the
the
code,
code
let's
let's
quickly
quickly
look
look
at
at
what
what
a
a
RESTful
restful
API
api
is
is
and
and
how
how
communication
communication
works
works
between
between
the
the
client
client
and
and
the
the
server.
server
So
so
here
here
we
we
have
have
a
a
client
client
on
on
the
the
left
left
and
and
a
a
server
server
on
on
the
the
right.
right
Rest
rest
is
is
simply
simply
a
a
way
way
for
for
these
these
two
two
parties
parties
to
to
communicate
communicate
in
in
a
a
standardized
standardized
way.
way
When
when
the
the
client
client
makes
makes
a
a
request,
request
it's
it's
going
going
to
to
use
use
a
a
specific
specific
verb
verb
or
or
method
method
to
to
interact
interact
with
with
the
the
server.
server
First,
first
we'll
we'll
go
go
ahead
ahead
and
and
make
make
a
a
get
get
request.
request
This
this
tells
tells
the
the
server
server
that
that
we
we
only
only
want
want
to
to
retrieve
retrieve
data
data
and
and
we're
we're
not
not
going
going
to
to
modify
modify
it
it
in
in
any
any
way.
way
The
the
server
server
will
will
respond
respond
with
with
the
the
status
status
code
code
as
as
well
well
as
as
the
the
data
data
that
that
was
was
requested.
requested
If
if
it
it
was
was
a
a
successful
successful
request,
request
it
it
should
should
be
be
a
a
200
200
level
level
response.
response
But
but
if
if
the
the
request
request
wasn't
wasn't
valid,
valid
it
it
should
should
be
be
a
a
400
400
or
or
500
500
level
level
error
error
response.
response
A
a
400
400
response
response
generally
generally
means
means
the
the
client
client
screwed
screwed
something
something
up
up
and
and
a
a
500
500
level
level
response
response
generally
generally
means
means
there
there
was
was
an
an
error
error
on
on
the
the
server
server
itself.
itself
If
if
we
we
send
send
a
a
post
post
request,
request
we're
we're
telling
telling
the
the
server
server
that
that
we
we
intend
intend
to
to
create
create
new
new
data.
data
When
when
you
you
send
send
a
a
post
post
request,
request
you
you
also
also
send
send
that
that
data
data
payload
payload
with
with
it,
it
which
which
is
is
the
the
data
data
you
you
intend
intend
to
to
save
save
on
on
the
the
server.
server
After
after
the
the
server
server
successfully
successfully
saves
saves
it,
it
it
it
should
should
respond
respond
with
with
a
a
201
201
success
success
message,
message
This
this
time
time
saying
saying
that
that
the
the
resource
resource
was
was
created.
created
In
in
addition
addition
to
to
get
get
and
and
post,
post
you
you
also
also
have
have
other
other
verbs
verbs
such
such
as
as
put,
put
patch,
patch
and
and
delete.
delete
They
they
all
all
work
work
in
in
a
a
similar
similar
way,
way
just
just
conveying
conveying
a
a
slightly
slightly
different
different
message
message
for
for
what
what
you
you
intend
intend
to
to
do
do
on
on
the
the
server.
server
And
and
that's
that's
basically
basically
the
the
gist
gist
of
of
how
how
REST
rest
works
works
from
from
a
a
very
very
high
high
level.
level
Now
now
let's
let's
start
start
retrieving
retrieving
data
data
from
from
a
a
REST
rest
wind
wind
point
point
using
using
Angular.
angular
For
for
this
this
lesson,
lesson
I'm
i'm
gonna
gonna
be
be
working
working
from
from
a
a
Stackblitz
stackblitz
project.
project
This
this
allows
allows
me
me
to
to
include
include
a
a
link
link
in
in
the
the
description
description
where
where
you
you
can
can
run
run
this
this
code
code
and
and
fork
fork
it
it
for
for
yourself.
yourself
The
the
first
first
thing
thing
we're
we're
going
going
to
to
do
do
is
is
go
go
into
into
the
the
app
app
module
module
and
and
import
import
the
the
HTTP
http
client
client
module
module
from
from
Angular
angular
common.
common
Ever
ever
since
since
Angular
angular
4.3,
4.3
we've
we've
had
had
a
a
client
client
module
module
built
built
into
into
common,
common
so
so
just
just
Make
make
sure
sure
that's
that's
the
the
one
one
you're
you're
actually
actually
using.
using
From
from
there,
there
we
we
can
can
go
go
into
into
the
the
app
app
component
component
and
and
import
import
the
the
HTTP
http
client
client
which
which
works
works
just
just
like
like
an
an
Angular
angular
service.
service
It's
it's
injectable,
injectable
so
so
we
we
can
can
just
just
add
add
it
it
right
right
in
in
the
the
constructor.
constructor
Then
then
I'm
i'm
going
going
to
to
define
define
a
a
root
root
URL
url
variable
variable
that
that
represents
represents
the
the
main
main
HTTP
http
endpoint
endpoint
that
that
we're
we're
going
going
to
to
be
be
using.
using
For
for
this
this
demo,
demo
I'm
i'm
using
using
JSON
json
Placeholder,
placeholder
which
which
is
is
just
just
a
a
mock
mock
API
api
that
that
we
we
can
can
send
send
requests
requests
to
to
and
and
receive
receive
responses
responses
from.
from
So
so
we'll
we'll
just
just
go
go
ahead
ahead
and
and
copy
copy
and
and
paste
paste
the
the
URL
url
and
and
then
then
we'll
we'll
do
do
the
the
rest
rest
of
of
the
the
work
work
in
in
Angular.
angular
So
so
first
first
I'm
i'm
going
going
to
to
opt
opt
out
out
of
of
TypeScript
typescript
static
static
typing
typing
and
and
we're
we're
going
going
to
to
make
make
a
a
Get
get
request
request
to
to
the
the
API.
api
First
first
I
i
define
define
a
a
get
get
post
post
method
method
and
and
then
then
I'll
i'll
define
define
the
the
post
post
variable
variable
by
by
calling
calling
HTTP
http
get
get
and
and
that's
that's
going
going
to
to
return
return
an
an
observable.
observable
So
so
we'll
we'll
pass
pass
in
in
the
the
root
root
URL
url
and
and
that
that
should
should
return
return
an
an
observable
observable
of
of
the
the
response
response
from
from
the
the
API.
api
In
in
the
the
HTML,
html
the
the
first
first
thing
thing
I'll
i'll
do
do
is
is
set
set
up
up
a
a
button
button
that
that
will
will
trigger
trigger
the
the
API
api
call
call
and
and
then
then
from
from
there
there
I'm
i'm
going
going
to
to
use
use
n
n
g
g
if
if
to
to
loop
loop
over
over
the
the
observable
observable
and
and
unwrap
unwrap
it
it
with
with
the
the
async
async
pipe.
pipe
Then
then
I
i
print
print
it
it
as
as
a
a
JSON
json
object,
object
but
but
you
you
could
could
do
do
anything
anything
you
you
want
want
here
here
with
with
the
the
underlying
underlying
data.
data
Now
now
if
if
we
we
load
load
the
the
actual
actual
app
app
in
in
Stackblitz,
stackblitz
we
we
should
should
see
see
the
the
response
response
from
from
JSON
json
Placeholder.
placeholder
So
so
after
after
clicking
clicking
the
the
post
post
button,
button
we
we
get
get
a
a
response
response
of
of
an
an
array
array
of
of
different
different
post
post
objects.
objects
For
for
this
this
first
first
example,
example
I
i
opted
opted
out
out
of
of
TypeScript
typescript
but
but
now
now
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
use
use
your
your
own
own
interface
interface
and
and
pass
pass
it
it
down
down
to
to
the
the
get
get
method.
method
So
so
we're
we're
exporting
exporting
an
an
interface
interface
called
called
Post
post
and
and
it's
it's
just
just
going
going
to
to
have
have
a
a
couple
couple
of
of
properties
properties
here
here
for
for
an
an
ID,
id
User
user
ID,
id
Title,
title
and
and
Body.
body
Now
now
we
we
can
can
import
import
it
it
back
back
in
in
the
the
App
app
component
component
and
and
we'll
we'll
also
also
import
import
the
the
RxJS
rxjs
observable
observable
and
and
then
then
we'll
we'll
apply
apply
these
these
to
to
the
the
post
post
variable.
variable
So
so
we're
we're
going
going
to
to
say
say
our
our
post
post
variable
variable
is
is
an
an
observable
observable
that
that
contains
contains
an
an
array
array
of
of
post
post
objects
objects
that
that
adhere
adhere
to
to
the
the
post
post
interface.
interface
The
the
return
return
value
value
on
on
HTTP
http
get
get
is
is
typed
typed
as
as
an
an
object
object
so
so
we
we
need
need
to
to
change
change
that
that
to
to
our
our
post
post
array.
array
So
so
if
if
we
we
go
go
ahead
ahead
and
and
run
run
this
this
code,
code
we
we
get
get
the
the
exact
exact
same
same
result,
result
but
but
we
we
have
have
the
the
benefit
benefit
of
of
strong
strong
typing
typing
in
in
our
our
code
code
at
at
this
this
point.
point
So
so
now
now
I'll
i'll
go
go
ahead
ahead
and
and
opt
opt
back
back
out
out
of
of
TypeScript
typescript
and
and
show
show
you
you
how
how
to
to
send
send
URL
url
parameters
parameters
with
with
your
your
request.
request
It's
it's
really
really
common
common
to
to
send
send
a
a
parameter
parameter
with
with
a
a
request
request
to
to
limit
limit
it
it
or
or
filter
filter
it
it
in
in
some
some
kind
kind
of
of
way
way
on
on
the
the
server.
server
With
with
JSON
json
Placeholder,
placeholder
we
we
can
can
filter
filter
post
post
by
by
the
the
user
user
ID.
id
So
so
So
so
this
this
is
is
how
how
we
we
would
would
do
do
it
it
if
if
we
we
were
were
going
going
to
to
hard
hard
code
code
the
the
parameter.
parameter
We
we
have
have
a
a
question
question
mark
mark
followed
followed
by
by
the
the
parameter
parameter
and
and
equals
equals
some
some
value.
value
This
this
works
works
fine,
fine
but
but
it's
it's
not
not
a
a
very
very
maintainable
maintainable
way
way
to
to
go
go
because
because
if
if
we
we
have
have
multiple
multiple
parameters
parameters
or
or
if
if
they
they
get
get
created
created
dynamically,
dynamically
it's
it's
gonna
gonna
be
be
hard
hard
to
to
hard
hard
code
code
them
them
directly
directly
in
in
a
a
string.
string
What
what
we
we
can
can
do
do
instead
instead
is
is
use
use
Angular's
angular's
HTTP
http
params
params
class
class
to
to
build
build
these
these
parameters
parameters
dynamically.
dynamically
We
we
do
do
that
that
By
by
instantiating
instantiating
a
a
new
new
instance
instance
of
of
the
the
class,
class
and
and
then
then
we
we
can
can
call
call
set
set
or
or
append
append
on
on
the
the
parameter
parameter
and
and
the
the
value
value
that
that
we
we
wanna
wanna
set.
set
And
and
then
then
we
we
pass
pass
that
that
as
as
an
an
object
object
as
as
the
the
second
second
argument
argument
to
to
our
our
get
get
request.
request
When
when
we
we
send
send
this
this
parameter,
parameter
JSON
json
Placeholder
placeholder
will
will
only
only
return
return
the
the
post
post
that
that
have
have
this
this
matching
matching
user
user
ID.
id
We
we
can
can
follow
follow
a
a
very
very
similar
similar
process
process
for
for
HTTP
http
headers,
headers
which
which
is
is
going
going
to
to
be
be
a
a
very
very
common
common
use
use
case
case
if
if
you're
you're
using
using
authentication
authentication
in
in
your
your
app.
app
Let's
let's
imagine
imagine
that
that
we
we
want
want
to
to
send
send
a
a
request
request
that
that
can
can
only
only
be
be
performed
performed
by
by
the
the
currently
currently
logged
logged
in
in
user.
user
In
in
that
that
case,
case
we
we
could
could
hypothetically
hypothetically
send
send
a
a
JSON
json
web
web
token
token
with
with
their
their
authentication
authentication
details
details
in
in
the
the
header,
header
then
then
the
the
server
server
could
could
decode
decode
that
that
token
token
to
to
validate
validate
that
that
this
this
user
user
does
does
have
have
the
the
right
right
permission
permission
to
to
make
make
this
this
request.
request
So
so
just
just
like
like
before
before
we
we
pass
pass
the
the
headers
headers
as
as
the
the
second
second
argument
argument
in
in
the
the
Git
git
request.
request
So
so
now
now
I'm
i'm
going
going
to
to
test
test
this
this
out
out
By
by
going
going
to
to
the
the
network
network
tab
tab
in
in
Chrome,
chrome
we
we
can
can
inspect
inspect
the
the
request
request
in
in
the
the
headers
headers
tab
tab
and
and
we
we
can
can
see
see
here
here
that
that
Has
has
the
the
authorization
authorization
token
token
that
that
we
we
had
had
defined
defined
in
in
Angular.
angular
So
so
now
now
let's
let's
go
go
ahead
ahead
and
and
send
send
a
a
post
post
request
request
where
where
we
we
actually
actually
modify
modify
data
data
on
on
the
the
server.
server
So
so
So
so
we'll
we'll
create
create
a
a
new
new
variable
variable
called
called
new
new
post
post
and
and
we'll
we'll
also
also
create
create
a
a
new
new
method
method
to
to
handle
handle
this
this
operation.
operation
Post
post
is
is
almost
almost
identical
identical
to
to
Git.
git
The
the
only
only
difference
difference
is
is
we
we
send
send
a
a
body
body
with
with
the
the
request
request
that
that
represents
represents
the
the
data
data
that
that
we
we
wanna
wanna
modify
modify
on
on
the
the
server.
server
So
so
we'll
we'll
go
go
ahead
ahead
and
and
create
create
some
some
random
random
post
post
data
data
here
here
And
and
then
then
we'll
we'll
send
send
this
this
object
object
as
as
the
the
second
second
argument
argument
to
to
the
the
post
post
request.
request
So
so
we
we
call
call
HTTP
http
post
post
to
to
the
the
same
same
URL
url
and
and
pass
pass
it
it
the
the
data
data
payload.
payload
In
in
the
the
HTML
html
we'll
we'll
create
create
another
another
button
button
that
that
triggers
triggers
the
the
createPost
createpost
method.
method
The
the
new
new
post
post
variable
variable
is
is
just
just
a
a
single
single
object
object
observable
observable
so
so
we
we
can
can
get
get
that
that
data
data
by
by
calling
calling
async
async
and
and
JSON.
json
Then
then
we
we
can
can
load
load
the
the
app
app
and
and
if
if
we
we
click
click
create
create
post,
post
you
you
see
see
we
we
get
get
back
back
here
here
the
the
object
object
itself
itself
with
with
the
the
new
new
data
data
that
that
was
was
created
created
on
on
the
the
server.
server
One
one
of
of
the
the
most
most
powerful
powerful
features
features
about
about
Angular's
angular's
HTTP
http
client
client
is
is
that
that
you
you
can
can
use
use
any
any
RxJS
rxjs
operator
operator
on
on
it.
it
So
so
let's
let's
say
say
we
we
wanna
wanna
map
map
the
the
post
post
down
down
to
to
just
just
the
the
title.
title
We
we
can
can
just
just
throw
throw
in
in
the
the
map
map
operator
operator
and
and
then
then
map
map
the
the
post
post
down
down
to
to
just
just
its
its
title.
title
So
so
if
if
we
we
rerun
rerun
the
the
same
same
method,
method
we
we
get
get
just
just
the
the
title
title
back
back
instead
instead
of
of
the
the
full
full
object.
object
As
as
you
you
can
can
imagine,
imagine
there's
there's
all
all
kinds
kinds
of
of
clever
clever
things
things
you
you
can
can
do
do
with
with
RxJS
rxjs
to
to
handle
handle
multiple
multiple
requests
requests
and
and
map
map
everything
everything
down
down
to
to
the
the
exact
exact
data
data
format
format
that
that
you
you
want.
want
You
you
can
can
also
also
use
use
RxJS
rxjs
to
to
handle
handle
errors.
errors
So
so
in
in
this
this
case
case
we'll
we'll
import
import
the
the
catch
catch
and
and
retry
retry
operators
operators
and
and
also
also
the
the
observable
observable
of
of
operator.
operator
Then
then
I'm
i'm
going
going
to
to
make
make
the
the
post
post
request
request
on
on
an
an
endpoint
endpoint
that
that
doesn't
doesn't
actually
actually
exist
exist
which
which
is
is
going
going
to
to
trigger
trigger
an
an
error
error
response.
response
First,
first
I'm
i'm
going
going
to
to
tell
tell
RxJS
rxjs
to
to
retry
retry
the
the
request
request
3
3
times
times
if
if
it
it
fails.
fails
And
and
if
if
it
it
continues
continues
to
to
fail,
fail
we'll
we'll
go
go
ahead
ahead
and
and
catch
catch
it
it
and
and
we'll
we'll
console
console
log
log
it
it
as
as
well
well
as
as
return
return
it
it
back
back
as
as
an
an
observable.
observable
I'm
i'm
doing
doing
this
this
just
just
to
to
show
show
you
you
the
the
response
response
on
on
the
the
front
front
end
end
And
and
we
we
can
can
do
do
that
that
by
by
returning
returning
an
an
observable
observable
of
of
the
the
error
error
itself.
itself
So
so
if
if
we
we
try
try
this
this
out,
out
we
we
can
can
see
see
we
we
get
get
4
4
post
post
requests
requests
here,
here
the
the
original
original
one
one
plus
plus
the
the
3
3
retries.
retries
And
and
when
when
it
it
fails
fails
for
for
good,
good
it
it
console
console
logs
logs
the
the
error
error
and
and
displays
displays
the
the
error
error
object
object
in
in
the
the
user
user
facing
facing
front
front
end.
end
So
so
that
that
There's
there's
the
the
basic
basic
HTTP
http
concepts
concepts
that
that
you
you
need
need
to
to
know
know
to
to
get
get
started
started
using
using
third
third
party
party
APIs
apis
in
in
Angular.
angular
But
but
there
there
is
is
one
one
really
really
cool
cool
tool
tool
I
i
wanna
wanna
show
show
you
you
before
before
the
the
end
end
of
of
this
this
video
video
called
called
Swagger.
swagger
It's
it's
a
a
framework
framework
for
for
building
building
APIs
apis
both
both
server
server
side
side
and
and
client
client
side.
side
It
it
allows
allows
you
you
to
to
define
define
API
api
code
code
in
in
a
a
readable
readable
YAML
yaml
format
format
And
and
it
it
can
can
actually
actually
automatically
automatically
generate
generate
a
a
lot
lot
of
of
your
your
Angular
angular
client
client
side
side
code.
code
So
so
you
you
would
would
define
define
the
the
details
details
of
of
your
your
API
api
here
here
on
on
the
the
left
left
And
and
then
then
it
it
gives
gives
you
you
a
a
readable
readable
documented
documented
format
format
of
of
it
it
on
on
the
the
right.
right
Then
then
if
if
you
you
go
go
up
up
to
to
generate
generate
client
client
and
and
go
go
to
to
TypeScript
typescript
Angular
angular
2,
2
It
it
will
will
generate
generate
an
an
entire
entire
Angular
angular
app
app
with
with
the
the
Swagger
swagger
API
api
built
built
into
into
it.
it
You
you
can
can
download
download
the
the
generated
generated
code
code
and
and
then
then
open
open
it
it
in
in
your
your
editor
editor
And
and
you'll
you'll
see
see
you
you
have
have
a
a
bunch
bunch
of
of
Angular
angular
code
code
here
here
with
with
the
the
HTTP
http
module
module
but
but
I
i
should
should
warn
warn
you
you
this
this
is
is
the
the
previous
previous
version
version
of
of
HTTP
http
in
in
Angular
angular
so
so
Just
just
keep
keep
that
that
in
in
mind.
mind
Many
many
of
of
the
the
methods
methods
and
and
concepts
concepts
will
will
be
be
identical,
identical
but
but
you
you
won't
won't
be
be
able
able
to
to
use
use
this
this
code
code
line
line
for
for
line.
line
In
in
any
any
case,
case
it
it
should
should
give
give
you
you
some
some
good
good
ideas
ideas
and
and
help
help
You
you
jump
jump
start
start
the
the
process
process
of
of
building
building
your
your
own
own
front
front
end
end
API
api
client.
client
That's
that's
it
it
for
for
Angular
angular
HTTP.
http
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
And
and
subscribe,
subscribe
and
and
if
if
you
you
wanna
wanna
go
go
beyond
beyond
the
the
basics,
basics
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
Speaker 0 explains the basics of Angular's HTTP module and discusses the concept of a RESTful API, including the use of a parameter with a request limit or a filter on the server. They then move on to discuss importating the HTTP client and the process of retrieving data from a REST web gateway using Angular. The speakers also introduce a framework called Swagger for building APIs and explain how to define API code in a readable format and generate a new Angular app.
Angular HTTP Client Quick Start Tutorial
Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs. By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services. The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app. Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server. So here we have a client on the left and a server on the right. Rest is simply a way for these two parties to communicate in a standardized way. When the client makes a request, it's going to use a specific verb or method to interact with the server. First, we'll go ahead and make a get request. This tells the server that we only want to retrieve data and we're not going to modify it in any way. The server will respond with the status code as well as the data that was requested. If it was a successful request, it should be a 200 level response. But if the request wasn't valid, it should be a 400 or 500 level error response. A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself. If we send a post request, we're telling the server that we intend to create new data. When you send a post request, you also send that data payload with it, which is the data you intend to save on the server. After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created. In addition to get and post, you also have other verbs such as put, patch, and delete. They all work in a similar way, just conveying a slightly different message for what you intend to do on the server. And that's basically the gist of how REST works from a very high level. Now let's start retrieving data from a REST wind point using Angular. For this lesson, I'm gonna be working from a Stackblitz project. This allows me to include a link in the description where you can run this code and fork it for yourself. The first thing we're going to do is go into the app module and import the HTTP client module from Angular common. Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using. From there, we can go into the app component and import the HTTP client which works just like an Angular service. It's injectable, so we can just add it right in the constructor. Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using. For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from. So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular. So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API. First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable. So we'll pass in the root URL and that should return an observable of the response from the API. In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe. Then I print it as a JSON object, but you could do anything you want here with the underlying data. Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder. So after clicking the post button, we get a response of an array of different post objects. For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method. So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body. Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable. So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface. The return value on HTTP get is typed as an object so we need to change that to our post array. So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point. So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request. It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server. With JSON Placeholder, we can filter post by the user ID. So So this is how we would do it if we were going to hard code the parameter. We have a question mark followed by the parameter and equals some value. This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string. What we can do instead is use Angular's HTTP params class to build these parameters dynamically. We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set. And then we pass that as an object as the second argument to our get request. When we send this parameter, JSON Placeholder will only return the post that have this matching user ID. We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app. Let's imagine that we want to send a request that can only be performed by the currently logged in user. In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request. So just like before we pass the headers as the second argument in the Git request. So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular. So now let's go ahead and send a post request where we actually modify data on the server. So So we'll create a new variable called new post and we'll also create a new method to handle this operation. Post is almost identical to Git. The only difference is we send a body with the request that represents the data that we wanna modify on the server. So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request. So we call HTTP post to the same URL and pass it the data payload. In the HTML we'll create another button that triggers the createPost method. The new post variable is just a single object observable so we can get that data by calling async and JSON. Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server. One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it. So let's say we wanna map the post down to just the title. We can just throw in the map operator and then map the post down to just its title. So if we rerun the same method, we get just the title back instead of the full object. As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want. You can also use RxJS to handle errors. So in this case we'll import the catch and retry operators and also the observable of operator. Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response. First, I'm going to tell RxJS to retry the request 3 times if it fails. And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable. I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself. So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries. And when it fails for good, it console logs the error and displays the error object in the user facing front end. So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular. But there is one really cool tool I wanna show you before the end of this video called Swagger. It's a framework for building APIs both server side and client side. It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code. So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right. Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it. You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind. Many of the methods and concepts will be identical, but you won't be able to use this code line for line. In any case, it should give you some good ideas and help You jump start the process of building your own front end API client. That's it for Angular HTTP. If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
Speaker 0 explains the basics of Angular's HTTP module and discusses the concept of a RESTful API, including the use of a parameter with a request limit or a filter on the server. They then move on to discuss importating the HTTP client and the process of retrieving data from a REST web gateway using Angular. The speakers also introduce a framework called Swagger for building APIs and explain how to define API code in a readable format and generate a new Angular app.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular HTTP Client Quick Start Tutorial 
        and a small summary : Speaker 0 explains the basics of Angular's HTTP module and discusses the concept of a RESTful API, including the use of a parameter with a request limit or a filter on the server. They then move on to discuss importating the HTTP client and the process of retrieving data from a REST web gateway using Angular. The speakers also introduce a framework called Swagger for building APIs and explain how to define API code in a readable format and generate a new Angular app.
        [/INST]
        
        Generate the video : Mastering the basics of Angular's HTTP module will open up the door to interact with thousands of exciting web based APIs. By the end of this lesson you'll have the basic tools you would need to do things like request weather data, stock quotes, nutrition facts, as well as interact with major platforms like Facebook, Twitter, and Amazon web services. The one thing these products all have in common is that they provide a RESTful API that you can consume from your Angular app. Before we jump into the code, let's quickly look at what a RESTful API is and how communication works between the client and the server. So here we have a client on the left and a server on the right. Rest is simply a way for these two parties to communicate in a standardized way. When the client makes a request, it's going to use a specific verb or method to interact with the server. First, we'll go ahead and make a get request. This tells the server that we only want to retrieve data and we're not going to modify it in any way. The server will respond with the status code as well as the data that was requested. If it was a successful request, it should be a 200 level response. But if the request wasn't valid, it should be a 400 or 500 level error response. A 400 response generally means the client screwed something up and a 500 level response generally means there was an error on the server itself. If we send a post request, we're telling the server that we intend to create new data. When you send a post request, you also send that data payload with it, which is the data you intend to save on the server. After the server successfully saves it, it should respond with a 201 success message, This time saying that the resource was created. In addition to get and post, you also have other verbs such as put, patch, and delete. They all work in a similar way, just conveying a slightly different message for what you intend to do on the server. And that's basically the gist of how REST works from a very high level. Now let's start retrieving data from a REST wind point using Angular. For this lesson, I'm gonna be working from a Stackblitz project. This allows me to include a link in the description where you can run this code and fork it for yourself. The first thing we're going to do is go into the app module and import the HTTP client module from Angular common. Ever since Angular 4.3, we've had a client module built into common, so just Make sure that's the one you're actually using. From there, we can go into the app component and import the HTTP client which works just like an Angular service. It's injectable, so we can just add it right in the constructor. Then I'm going to define a root URL variable that represents the main HTTP endpoint that we're going to be using. For this demo, I'm using JSON Placeholder, which is just a mock API that we can send requests to and receive responses from. So we'll just go ahead and copy and paste the URL and then we'll do the rest of the work in Angular. So first I'm going to opt out of TypeScript static typing and we're going to make a Get request to the API. First I define a get post method and then I'll define the post variable by calling HTTP get and that's going to return an observable. So we'll pass in the root URL and that should return an observable of the response from the API. In the HTML, the first thing I'll do is set up a button that will trigger the API call and then from there I'm going to use n g if to loop over the observable and unwrap it with the async pipe. Then I print it as a JSON object, but you could do anything you want here with the underlying data. Now if we load the actual app in Stackblitz, we should see the response from JSON Placeholder. So after clicking the post button, we get a response of an array of different post objects. For this first example, I opted out of TypeScript but now I'm going to show you how to use your own interface and pass it down to the get method. So we're exporting an interface called Post and it's just going to have a couple of properties here for an ID, User ID, Title, and Body. Now we can import it back in the App component and we'll also import the RxJS observable and then we'll apply these to the post variable. So we're going to say our post variable is an observable that contains an array of post objects that adhere to the post interface. The return value on HTTP get is typed as an object so we need to change that to our post array. So if we go ahead and run this code, we get the exact same result, but we have the benefit of strong typing in our code at this point. So now I'll go ahead and opt back out of TypeScript and show you how to send URL parameters with your request. It's really common to send a parameter with a request to limit it or filter it in some kind of way on the server. With JSON Placeholder, we can filter post by the user ID. So So this is how we would do it if we were going to hard code the parameter. We have a question mark followed by the parameter and equals some value. This works fine, but it's not a very maintainable way to go because if we have multiple parameters or if they get created dynamically, it's gonna be hard to hard code them directly in a string. What we can do instead is use Angular's HTTP params class to build these parameters dynamically. We do that By instantiating a new instance of the class, and then we can call set or append on the parameter and the value that we wanna set. And then we pass that as an object as the second argument to our get request. When we send this parameter, JSON Placeholder will only return the post that have this matching user ID. We can follow a very similar process for HTTP headers, which is going to be a very common use case if you're using authentication in your app. Let's imagine that we want to send a request that can only be performed by the currently logged in user. In that case, we could hypothetically send a JSON web token with their authentication details in the header, then the server could decode that token to validate that this user does have the right permission to make this request. So just like before we pass the headers as the second argument in the Git request. So now I'm going to test this out By going to the network tab in Chrome, we can inspect the request in the headers tab and we can see here that Has the authorization token that we had defined in Angular. So now let's go ahead and send a post request where we actually modify data on the server. So So we'll create a new variable called new post and we'll also create a new method to handle this operation. Post is almost identical to Git. The only difference is we send a body with the request that represents the data that we wanna modify on the server. So we'll go ahead and create some random post data here And then we'll send this object as the second argument to the post request. So we call HTTP post to the same URL and pass it the data payload. In the HTML we'll create another button that triggers the createPost method. The new post variable is just a single object observable so we can get that data by calling async and JSON. Then we can load the app and if we click create post, you see we get back here the object itself with the new data that was created on the server. One of the most powerful features about Angular's HTTP client is that you can use any RxJS operator on it. So let's say we wanna map the post down to just the title. We can just throw in the map operator and then map the post down to just its title. So if we rerun the same method, we get just the title back instead of the full object. As you can imagine, there's all kinds of clever things you can do with RxJS to handle multiple requests and map everything down to the exact data format that you want. You can also use RxJS to handle errors. So in this case we'll import the catch and retry operators and also the observable of operator. Then I'm going to make the post request on an endpoint that doesn't actually exist which is going to trigger an error response. First, I'm going to tell RxJS to retry the request 3 times if it fails. And if it continues to fail, we'll go ahead and catch it and we'll console log it as well as return it back as an observable. I'm doing this just to show you the response on the front end And we can do that by returning an observable of the error itself. So if we try this out, we can see we get 4 post requests here, the original one plus the 3 retries. And when it fails for good, it console logs the error and displays the error object in the user facing front end. So that There's the basic HTTP concepts that you need to know to get started using third party APIs in Angular. But there is one really cool tool I wanna show you before the end of this video called Swagger. It's a framework for building APIs both server side and client side. It allows you to define API code in a readable YAML format And it can actually automatically generate a lot of your Angular client side code. So you would define the details of your API here on the left And then it gives you a readable documented format of it on the right. Then if you go up to generate client and go to TypeScript Angular 2, It will generate an entire Angular app with the Swagger API built into it. You can download the generated code and then open it in your editor And you'll see you have a bunch of Angular code here with the HTTP module but I should warn you this is the previous version of HTTP in Angular so Just keep that in mind. Many of the methods and concepts will be identical, but you won't be able to use this code line for line. In any case, it should give you some good ideas and help You jump start the process of building your own front end API client. That's it for Angular HTTP. If this video helped you, please like And subscribe, and if you wanna go beyond the basics, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
        