Check out a free preview of the full Building Awesomer Apps with Angular course:
The "HTTP Demonstration" 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:

Lukas creates a service that loads JSON. He then demonstrates that observables do not load any data from their endpoint until the subscribe method has been called. He also compares the behavior of observables to the promise-based fetch API.

Get Unlimited Access Now

Transcript from the "HTTP Demonstration" Lesson

[00:00:00]
>> Lukas Ruebbelke: So this actually shouldn't be too bad. I'm gonna do a quick demonstration and I'm gonna wire up one call, and then I'm going to turn over the challenge. And I'm gonna let everyone kind of play around with the end point and the goal is to actually hook up widgets to communicate with your REST server.

[00:00:20] So just to reiterate, our endpoint is if you go to local host 3000.
>> Lukas Ruebbelke: We have this widgets endpoint here that we're going to be consuming. And so for instance, if you wanted to get a, I'm in standard REST. So the entire collection, if you wanted to get a single collection or a single item from the collection and so on.

[00:00:46] So this is what we're going to be communicating with and wiring up. So hopping into the code, let's go to our widget service.
>> Lukas Ruebbelke: I'm gonna do one thing real quick.
>> Lukas Ruebbelke: I'm just gonna copy this, cuz I'm not gonna remember that. So let's set our base URL.

[00:01:27] In this case, its widgets and then I created a header that we use. So now let's create a method called, well, actually I'm forgetting something. So if I'm going to make an HTTP call, I have a dependency obviously on that module and that service. So let's do our constructor, private_http.

[00:02:06]
>> Lukas Ruebbelke: So now it is available to us. From here, let's do.
>> Lukas Ruebbelke: We'll load widgets and see if I can do this from memory. So return this.http.get.
>> Lukas Ruebbelke: Paste URL. So this is using a string literal and this is gonna come back, and we need to convert it.

[00:02:43] So we're gonna go response. We're gonna convert this into json. And we're going to leave it at this, so I think I did this right.
>> Lukas Ruebbelke: What I'm also going to do.
>> Lukas Ruebbelke: Is I'm going to delete this. And apparently, I already have a constructor in there.
>> Lukas Ruebbelke: LoadWidgets, so we get base ur.

[00:03:15] [SOUND] Let's go into our.
>> Lukas Ruebbelke: Widgets component here. You can see already, it's saying like like what happened here?
>> Lukas Ruebbelke: So we're going to delete this, cuz we're no longer referencing a static collection and.
>> Lukas Ruebbelke: We're going to create a method called loadWidgets. This is slightly arbitrary, you could call it, could be something, anything.

[00:03:50] Let's try something here.
>> Lukas Ruebbelke: I don't like to put it all the way down here. Sometimes, the widget's.
>> Lukas Ruebbelke: And from here, we're going to go this.widgetsService.loadwidgets and how do we consume an observable string?
>> Speaker 2: Subscribe.
>> Lukas Ruebbelke: Subscribe, good. We're going to subscribe. And from here, we'll go widgets equals

[00:04:41]
>> Lukas Ruebbelke: And I think this is everything. Well, let's find out.
>> Lukas Ruebbelke: So it appeared to be working. Let's double check this. So I'm gonna go into server, go into our JSON file and remote red widget.
>> Lukas Ruebbelke: Let's refresh the page. There we go.
>> Lukas Ruebbelke: So this is pretty straight forward.

[00:05:35] We'll call it http.git, putting in the end point and then we're basically just returning the results and you've seen that subscribe to consume it. So let me go just a step further and let's look at the items service.
>> Lukas Ruebbelke: So I have these names a little messed up, but I wouldn't worry about that.

[00:06:07] So we just basically did this one here, all. So I'm actually going to just for consistency.
>> Lukas Ruebbelke: We'll call this all.
>> Lukas Ruebbelke: Now this is the one I just did, all. You can see here, load. Pretty straightforward, we're getting a single one. We're just updating the endpoint. Create actually takes a new item.

[00:06:43]
>> Lukas Ruebbelke: And instead of get, we're doing post. We're returning our payload into a string or basically back into a string, or passing in the header.
>> Lukas Ruebbelke: And now this is kind of, I had to fiddle with this a bit and kind of search around on the internet to figure out how to get this working.

[00:07:05] But this was the secret handshake for in this case. Now update, pretty much the same exact thing. The difference is you're updating an existing item, so you just add the ID to the endpoint. So this renders out as widgets, forward slash, whatever this ID is and it updates it.

[00:07:29] Delete, pretty much the same thing, except we're passing in an item, updating. The endpoint would then be widget four slash, whatever ID of the item you wanna delete and there we go. Now, we'll actually talk about this a little bit later. Actually, I think in two more modules from now.

[00:07:56] I will show you one other thing and then we'll go to our challenge is that in the item's component.
>> Lukas Ruebbelke: Notice I'm calling getItems, which is doing pretty much what I just did for widgets. Now, I have save item. What I'm doing here, is I'm checking, is there an ID?

[00:08:22] If there is an ID, I call update. If not, I call create. And what's happening in here and in production, I would not do this. But for here, for the sake of kind of a coherent user experience, when we get a response from the server, I'm simply just rehydrating the items.

[00:08:48] And the reason why I'm doing this is, so I'm saying create this item at the server. And once I know that it's done, go ahead and give me all of them and just rehydrate. Or if you delete, you say, I've deleted this item from the server. Go ahead and just get me a fresh collection.

[00:09:04] What this will allow you to do is especially if you have more than one person working on an endpoint, you may create something, but they may delete something. And so you're data model may be stale and there's situations where that can happen. So for me, I think one of the easiest defaults is like can I just refresh the collection or rehydrate it every time I make a change at the server?

[00:09:26] This is what I'm doing. What you can also do is change it in memory. So if you need it to be really fast like we've added this, add it in memory, go do the server call. And if it succeeds, then just let it ride. If not, then you just roll it back.

[00:09:43] And so this is for instance, like things like Firebase and I have some really sophisticated technology of like we did this thing. And behind the scenes, it failed like we just have to rule it back. And so this is in this case, I'm doing kind of the easiest thing possible and that's like go do this thing and then just refresh everything, just clear the desk.

[00:10:02] And somebody could say, well, like you're doing the same thing like twice. Like couldn't you extract this out? I could and if I were going to take another iteration on this, I probably would. This is merely a placeholder for, if I were going to actually do this, I would extend it into like NGRX and this is where this would happen.

[00:10:21] And so this is actually, would not be a final input for me in the application. But you can see here create, update, delete. What's interesting is the only logic I have in this container. Component is right here.
>> Lukas Ruebbelke: Everything else is actually delegating out to a service. I suppose maybe whether loose sense of what this might be consider it, what?

[00:10:50] It's an expression, but the only thing that is actually saying if this or that or doing some kind of thinking, it's this method right here. The reason being is I'm just capturing things and delegating it out. So even as a container component, this is very thin and efficient.

[00:11:09] Because it's just pulling in data. Hydrating its child components. And when something happens, it's capturing that event and delegating it back out.