Check out a free preview of the full Building Awesomer Apps with Angular course:
The "The HTTP Module" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

The HTTP Module in Angular simplifies the use of the XHR and JSONP APIs by using RESTful verbs and returning an observable object. Lucas takes a look at some the methods available in the API.

Get Unlimited Access Now

Transcript from the "The HTTP Module" Lesson

[00:00:00]
>> Lucas Ruebbelke: Server communication. If we go back to our app real quick, just kind of observe where we are. And this will kinda give us insight to what we're going to accomplish in the next module. When I want to save this, you can see we're just logging it out, so we're not persisting it.

[00:00:21] So the minute we refresh it, nothing's happening, and we're actually not updating anything. So let's complete the loop, make it full circle, circle of life, if you will. And we'll do that via server communication. So we're going to use the HTTP module. And we're gonna talk about the methods that are available.

[00:00:45] We'll talk about promises versus observables, and the header object, as well as some error handling. Now they just recently came out with an HTTP client module in four three. We're not going to talk about it here. But if you understand how this works, the API is almost identical.

[00:01:05] They just added some additional more advanced features. But this, the HTTP module, is gonna be supported for some time. So this just came out with HTTP client, but it's almost identical. So you can kind of just flip from one to the other, it's not gonna be too hard.

[00:01:23] So HTTP module, quite simply it simplifies the use of XML HTTP request or JSONP.
>> Lucas Ruebbelke: And conveniently, the API for the HTTP service matches RESTful verbs. So if you understand REST, then understanding how HTTP works, the module or the service, is going to be pretty straightforward. And it returns an observable.

[00:01:56] So we'll see what that means in a moment. So first and foremost, you import the module, that happens via the angular.cli. And then it provides these methods. So how many people here are fairly comfortable working with REST? Good, so I think it's one of these things where, once you've kind of wrapped your mind around the convention, it just works.

[00:02:23] No matter what server technology you're on, or whatever, it's just really easy to just know it's the same thing every single time. So you have request, which is kind of a generic, any kind of a request. But then on top of that we have get, post, put, delete, patch and head.

[00:02:39] Which I rarely every use. But get, post, put and delete, those are basically your CRUD operations.
>> Lucas Ruebbelke: And so what we have here is,
>> Lucas Ruebbelke: The item service and,
>> Lucas Ruebbelke: Let's see if this will connect here, there we go. So get, post, put and delete. Now I tried to find, if there is any real advantage of using post over put, and I think for the most part they're pretty identical.

[00:03:21] Somebody, if they want to sound off, I'd totally love to hear about it. But I think for the most part, they're about the same. So I use post for create. And I just use put because it seems to be more kind of in the, I don't know, like the spiritual animal of updating.

[00:03:38] So it's like I'm putting something up here, just go ahead and update it. So I just use post for create, put for update, and then obviously get and delete are pretty self explanatory.
>> Lucas Ruebbelke: What's interesting about is one, if you have some REST endpoints, your service is going to look pretty much like this almost all of the time.

[00:04:06] More often than not, you're simply going to update the endpoint, maybe the parameters to be more self-descriptive. And these things are, I almost didn't so REST is very conventional. Therefore, your services that communicate to the server generally are going to be equally conventional. This is, I think, the one time that I've seen inheritance happen that I think somewhat made sense.

[00:04:32] Is that I think actually Jeff Whelpley from GetHuman, other Angular GDE. They had a ton of REST end points. And so he created a base class that did all of this, and then extended it with kind of specific end points. So you would just set the end point and then your load create update delete was just available via inheritance.

[00:04:53] I think that may make sense. Somebody did that, probably would not offend me.