This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

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

The HTTP Module in Angular 2 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

>> Lukas Ruebbelke: So this is fairly straightforward, but now we are completing the puzzle or full circle by allowing us to communicate and persist changes to the server. And so what this really consists of is the HTTP module. The rest methods that exist on it. We'll talk about observable.toPromise, observable.subscribe, the difference between the two.

[00:00:28] So I know Chris B. had a question of promises versus observables, and so I'll address that actually right now. Headers, and then I'll talk about error handling briefly. And then we will just hack until Mark kicks us out of here. How's that sound? All right.
>> Lukas Ruebbelke: Two main things here, well, actually three.

[00:00:54] Look, three bullet points, how convenient. So really the HTTP module that allows us to do XHR calls, you can also do JSONP. I recommend there are some serious security concerns about using JSONP. So I recommend not doing that if you can. But more importantly, the API conveniently matches RESTful verbs.

[00:01:21] So, if you note the REST verbs, get, put, post, patch, delete, then you are familiar with the methods that exist on the HTTP module. And so, originally, I was, I come from kind of a cold fusion background where you would actually define a method on the server and then you would call it as if it were local.

[00:01:44] So interestingly enough, this is kind of where things are going back to. But when REST came out, I'm like, I don't understand what's the, why can't I just call or define a method on my server called get super items that would just give me everything I need and return it back.

[00:02:02] It's like well no, no, no, that doesn't work. Basically your URL has to match your data structure and there's conventions. The upside is once I actually wrap my mind around REST conventions, then you never have to think about it again. It doesn't actually matter what the back end is.

[00:02:22] So for me, I think when you are moving from a server-side world, so .NET, Java, whatever, a lot of times, the question is, well, how do we kind of move into this single page application? What does that look like? My answer is to essentially create a line down the middle or demarcate your application on a REST API.

[00:02:47] So your server handles your business logic, exposes it via a REST API and you consume it in your web application, and then when you need to basic persist things, that goes back over the REST API. The beauty of that is, especially if you have a legacy system, so I know a very large company that was invested heavily in .NET and they wanted to move to Node.

[00:03:13] So, and I've actually seen this with cold fusion as well, so the migration strategy is to convert your application to a front and back end using a REST API. And then what they did in piecemeal is actually replace the REST API on the .NET side with a REST API on node, and the front end was none the wiser.

[00:03:34] So, that convention is really, really handy and to the point of, I don't consider myself a backend programmer, but if I'm getting a REST API, I don't need to know. As well as, there's kind of some conventions, and some guidance, you can make some assumptions about that. Now, the HTTP module, when you make a call, it returns an observable, and we will talk about that in just a moment.

[00:04:02] So as with the forms modules, you need to import the HTTP module. Well, thankfully for the English CLI, that did that for us. And, here we go, simply matches the REST verbs. So for instance, hopefully this is in here.
>> Lukas Ruebbelke: I find this to be fairly conventional. Almost to the point that somebody could generate a service that calls a rest API very quickly.

[00:04:37] In fact, there are I think utilities out there that says like, here's my endpoint. Go ahead and just generate my calls to my REST API for me. So this is one case where it's really easy to generate, essentially code to consumer REST API because it's pretty much the same.

[00:04:57] But for instance, load items. Well we just call http.git, create, update http.put. You can do patch if that's your thing. And to delete is, http delete. Pretty simple right? So if you know the verbs. Then you just call the verb on the HTTP module, or the service in this case.

[00:05:29] Now, you will also notice that we, on create and update specifically, we're sending in the payload. We are converting this into a string to go over the wire, so in Angular 1 it did a lot of this for us under the hood. With Angular 2, the HTTP module is little bit more bare bones to give us more control over how we want to make these calls.

[00:05:54] But sending a payload over the wire, one turn into a string using JSON stringify so essentially you serialize it. And you'll notice that we're also sending in a header object.
>> Lukas Ruebbelke: Which we'll talk about as well. So this is just simply a way to tell the server what kind of content type is coming over the wire.

[00:06:18] But again, back to the verbs. Does everybody see them? Pretty civil? Get, post, put, delete. That's CRUD right there. You'll also notice that what we are returning is originally, or so what http dot whatever method is unobservable, we're then using .map to take that response and convert it into something we can use.

[00:06:49] So that's what map does. So just like a is we're saying, take this and for every item in here, go ahead an convert it to this. So in this case we're saying, take your response and instead call JSON on it and then return it. So we're essentially taking the payload and getting essentially a JSON representation of it.

[00:07:12] And from here, we are calling to promise. What this does is, as you can imagine, it returns a promise, and not an observable.