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

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 how do we do global intercepts, intercept handlers in NG2? That is a good question and,
>> Lukas Ruebbelke: I honestly don't know. So the idea of an HTTP interceptor in Angular 1 does not exist in Angular 2. So I do not think, this is something I'll have to get back to you on.

[00:00:24] Cuz I've asked about it and it's just like no good way.
>> Speaker 2: Well I see your handler function and it occurs to me you can probably inject a service to handle that. And then just delegate it to a service and have it put up your toaster or whatever you wanted to show.

[00:00:39]
>> Lukas Ruebbelke: So with Angular 1 it was handy because you actually could do aspect oriented programming and like crosscut across everything. But don't hold me to that. On thursday we're doing an authorization or secure webapp, an authorization work shop. And I would wager Ryan knows all about it. So Dale, come back on Thursday, and we'll let Ryan.

[00:01:09] Yes, Dale, I see you. You could've just asked that in person. You're right here.
>> Speaker 2: I didn't want to interrupt the flow.
>> Lukas Ruebbelke: Well I appreciate you not interrupting my flow.
>> Lukas Ruebbelke: Okay, so I think that I'm going to end up stepping into the solution a little bit.

[00:01:32] Let's go to our.
>> Lukas Ruebbelke: Widgets, let's go to our WidgetService.
>> Lukas Ruebbelke: Yes, so I would love to see a jest for the interceptor. Thank you.
>> Lukas Ruebbelke: So what I'm gonna do is I'm going to copy just some of this here.
>> Lukas Ruebbelke: We'll go into WidgetService.
>> Lukas Ruebbelke: And the reason why we're sending this BASE_URL here is because we have JSON server running in the background.

[00:02:43] So hopefully this will load a collection snap. I think I've probably actually overwritten this hold on.
>> Lukas Ruebbelke: Or rather what I would bet,
>> Lukas Ruebbelke: Is if I go to server.
>> Lukas Ruebbelke: Mm-hm. Hold on.
>> Lukas Ruebbelke: Let's go to github.com/onehungrymind.
>> Lukas Ruebbelke: Ha, it's in here. So you can pull this off of master because I've been building off of start.

[00:03:34] This did not exist. I'll just copy this. And let's just paste this in.
>> Lukas Ruebbelke: There we go. So this is one reason why I love JSON Server. Put the JSON on and you get a REST API, boom. Okay,
>> Lukas Ruebbelke: So now that I have stuff here, let's go ahead and wire this up.

[00:04:22]
>> Lukas Ruebbelke: Let's split this horizontal.
>> Lukas Ruebbelke: Actually that might be disconcerting.
>> Lukas Ruebbelke: What I'm gonna do is I'm going to delete these widgets here and we're going to get them from the server. So the first thing that I need to do is get the http module. So we'll go constructor(private http:).

[00:04:56]
>> Lukas Ruebbelke: And there we have it.
>> Lukas Ruebbelke: Then from here, loadWidgets,
>> Lukas Ruebbelke: And let's just do this inline real quick. So we'll go this.http.get
>> Lukas Ruebbelke: BASE_URL
>> Lukas Ruebbelke: map response
>> Lukas Ruebbelke: Let's go subscribe, let's go widgets.
>> Speaker 3: Lukas I think you got your export statement.
>> Lukas Ruebbelke: What's that?
>> Speaker 3: Exporting the class.

[00:06:01] Nevermind sorry. And then to be.
>> Lukas Ruebbelke: Firstly, I'm working on this much screen real estate. So Headers, Http, and let us see what happens.
>> Lukas Ruebbelke: If this works, I'm totally eating a cookie.
>> Lukas Ruebbelke: Well, how do we know? Because I'm not calling it. All right, let's go back here.

[00:06:37]
>> Lukas Ruebbelke: So it would be really handy if we actually called this. So let's go into our widgets.component.
>> Lukas Ruebbelke: And we'll just go widgetsService,
>> Lukas Ruebbelke: loadWidgets. Okay, so now we're at least calling it.
>> Lukas Ruebbelke: Look at that, okay.
>> Lukas Ruebbelke: There we go. So we're getting something, cool?
>> Lukas Ruebbelke: But we actually want to surface this into our component.

[00:07:29]
>> Lukas Ruebbelke: So let's go.
>> Lukas Ruebbelke: Let's do this, In our loadWidgets, we're going to actually return the results of this call, which is an observable. And we're going to pull off the subscribe block.
>> Lukas Ruebbelke: And let's actually see what happens,
>> Lukas Ruebbelke: When we just dump this out. What this looks like.

[00:08:12]
>> Lukas Ruebbelke: So you can see here, that we're getting an observable. And it has some stuff on it,
>> Lukas Ruebbelke: That we can dig in, yadda yadda yadda, not incredibly important. So at this point, we essentially have this observable object, that like a promise, is we cannot access directly. But what we can do is if we go back here, like a promise,

[00:08:57]
>> Lukas Ruebbelke: We can go here, subscribe. Event in this case, or whatever.
>> Lukas Ruebbelke: Or result I think. And then go this.widgets = result.
>> Lukas Ruebbelke: Yay, now what's happening here is if you look at the JSON, so we go here.
>> Lukas Ruebbelke: Notice that the image is essentially just a regular image, like we're actually not able to resolve that path like it doesn't exist.

[00:10:02] And so I'll show you one more demonstration. If we go here,
>> Lukas Ruebbelke: We do this in the items service. And so this is where things get super interesting, that it's not possible to do these kind of things with a promise.
>> Speaker 4: Can you break the line so we can see it all?

[00:10:26]
>> Lukas Ruebbelke: I'll break the line.
>> Speaker 4: Yeah yeah [LAUGH].
>> Lukas Ruebbelke: This is rather a verbose line of code.
>> Lukas Ruebbelke: I feel like maybe I should just type this up by hand and talk about it.
>> Lukas Ruebbelke: If I'm lucky, this will actually work. So with the observables, you can stack your transformers on top of each other as many times as you would like.

[00:11:07] So in this case, because our data is passing back an image property but with no knowledge of the actual path to where it lives on the server, we need to update this object. And so what we're getting now, and so every transformer or operator returns something. So now we're getting essentially widgets.

[00:11:34] And then what we want to return is a new widgets object that is a clone of
>> Lukas Ruebbelke: Widgets. Hold on.
>> Lukas Ruebbelke: Rather, hold on, hold on, hold on, hold on, hold on, hold on. I'm getting a little bit ahead of myself.
>> Lukas Ruebbelke: So we're just gonna loop through here.

[00:12:14] So using widgets, .map so within this, we're just going to return a new object. So, we're actually introducing yet another level of recursion or iteration. Then we're going to go, widget, okay back on track. Widget,
>> Lukas Ruebbelke: And the property we want to adjust is image. So we essentially want to overwrite a new image property.

[00:12:57]
>> Lukas Ruebbelke: And so we're going to take our BASE_URL, or rather our IMG_URL. We'll break this down again, so we can see this on one line.
>> Lukas Ruebbelke: And,
>> Lukas Ruebbelke: The widget.image properties. So this is,
>> Lukas Ruebbelke: What am I missing here? Why is this guy not happy? Is it happy, is it happy, is it happy, is it happy?

[00:13:46] All right, let's see if this works first and then we will walk through it. Yes, it does. So,
>> Lukas Ruebbelke: That was clearly not my most graceful swan dive. But, let's just talk about what I doing. So I'm getting the widgets, and really all I need to do, is from the widgets, I need to run through and create a new widgets array that has an updated image property.

[00:14:23] And so the way that I'm doing that is within here, I'm calling widgets.map and I'm mapping over the widget's collection. And I'm using object.assign to create a new widget object, which is the result of taking the original widget object, and we're overwriting the image property with, essentially the image value on the JSON object with a prepended image URL, and so, that's why that renders.

[00:14:58] And so essentially, what we're doing is we're stacking this. Now, let me show you one other thing real quick. Since we're talking about the observerables and, I'm feeling feisty. You can stack these up as much as you would like. The caveat is if you're going to use an operator, just make sure to import it.

[00:15:21] And let's say,
>> Lukas Ruebbelke: We wanted only widgets with an ID of one. And so this is a really easy way to, let's say you call the news and say give me all the users, but I want to only see the users that are active, for instance. So this session might be, let's go like this, widget.featured.

[00:15:59]
>> Lukas Ruebbelke: In this case, because this is Boolean, we should see one widget in here if I did not break it.
>> Lukas Ruebbelke: That's okay. Don't panic.
>> Speaker 2: Maybe.
>> Lukas Ruebbelke: Actually, I'm wondering.
>> Lukas Ruebbelke: Let's do.
>> Lukas Ruebbelke: Intuitively, I feel like this is right.
>> Lukas Ruebbelke: I feel like I'm doing something silly here.

[00:16:52] So, let's go here.
>> Lukas Ruebbelke: You just trace this out.
>> Lukas Ruebbelke: So, we're actually just getting a single array here. So I will abort this for a moment and let's just stop, step back and talk about what's happening. In fact, what I even wanna do is let's take off this second operator here.

[00:18:04] Let's go into our widgets list component and what I'm going to do is I'm going to take this off, as well. And so I just want to take five minutes, cuz we're at 4:30 right now and just go over this.
>> Lukas Ruebbelke: Let's go back here.
>> Lukas Ruebbelke: And so, we're pulling in widgets from the REST API.

[00:18:38] So if I go back here, just to prove this.
>> Lukas Ruebbelke: Let's go remote you all, there we go.
>> Lukas Ruebbelke: Refresh it. So you can see we're actually pulling it in from the. Let's just cover the mechanisms real quick and then I will give you a take home challenge, and then we will chat in a Q&A for as long as you want.

[00:19:11] In our widget service, what we've done is we've imported a CTP. We've then injected HTTP into our service and then using the restful verbs. In this case, get. So, there's the simplest possible rest call that you can make. We are returning the result of that. But first, we are mapping the results.

[00:19:42] So we're simply saying, take the results and convert it into a JSON structure. Then within our component, we consume it almost like a promise. But instead of then, we are using .subscribe.
>> Lukas Ruebbelke: So real quick, let's go to see this in its entirety or a version of it.

[00:20:08] If we go to shared, item service.
>> Lukas Ruebbelke: Here we can see now where we're mapping the URLs.
>> Lukas Ruebbelke: Then to create an item. We're calling post. We're passing in the object and the header, and we're just mapping the response to JSON, and returning it. And for delete, similar thing.

[00:20:46] And then for update, we're having to do a little bit of string manipulation the rip-off our image path. So then it goes back into our JSON is just the image, but that aside.
>> Lukas Ruebbelke: Here we go. So, we're actually deleting the image and then just kind of setting it back.

[00:21:10] So this is pure black magic just to make this work, but the main thing is we're calling patch. We could do put and converting to payload, sending the header and all the header is is Content-Type application JSON. So we're just setting, so that our server knows what it's dealing with.