Angular Core HttpClient

Transcript from the "HttpClient" Lesson

[00:00:00]
>> Lukas Ruebbelke: Let's go ahead and we're going to re-factor this to use the http client. So let's do first things first, make sure that in the core data module that we've included the HttpClientmodule. Now, what you also need to do and this is what we wanna write is that in your top level up module, we need to import HttpClient module as well.

[00:00:34] All right, so now that we have the imports in both places, let's go ahead and hop back into our project service and let's start to build the cell. So we're gonna go ahead and delete this local structure, we don't need it. And we are going to import the http client via dependency injection or we're going to make it available in our constructor.

[00:01:06]
>> Lukas Ruebbelke: Via dependency injection, httpClient.
>> Lukas Ruebbelke: Make sure I have the right one.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: We can also get rid of that. And because we're using a constructor assignment by putting private on here, this makes the service available for consumption in the rest of the service or class.

[00:01:41] And so we'll go return this.httpClient.get and from here, we need to put our end point.
>> Lukas Ruebbelke: And so we're going to break this up into two pieces using a string literal. So typically what I'll do is at the top of the class is I'll create a string that represents the model that I'm working with, so in this case projects.

[00:02:14] And so we'll go here and we'll put model, but then we need to put in our base URL. So
>> Lukas Ruebbelke: If you look in your packets.json there is, not the lock. We have installed json server which then spins up a db.json file. So it actually take that json file and converts it into a rest endpoint.

[00:02:45] So if we go to the browser and we go to, in this case localhost 3000, we can see that we have the server running. And if we go to projects, you can see that we have our project structure. So I'm gonna go back here and I'm just going to copy the base URL.

[00:03:06] And then in our code, let me just swap this disk around, we'll go here.
>> Lukas Ruebbelke: And I'm going to create in the project service,
>> Lukas Ruebbelke: A base URL constant, we'll just paste this in. And then from here, we paste in BASE_URL. Now, what you could do is there's an environments file that you could tuck it in there, if you wanted, but for now to keep it simple, I'm going to keep it in the project service, so base URL.

[00:03:47] By putting it an environments file which you could do is like if you are in dev use a dev url, if you are in prod, use a production url. So we'll take off the typing here and make sure that it's this.model.
>> Lukas Ruebbelke: Like so. And so when we call all, it's going to basically do a git request to this base URL, plus forward-slash projects.

[00:04:15] So now we need to actually consume this data, so back into our projects component.
>> Lukas Ruebbelke: You'll notice here that it's saying that this is not of type of an observable of an array of project. So we're gonna do a couple of tweaks here. I'm gonna show you kind of the long way around on how to get this data.

[00:04:38] So because we're doing an asynchronous version, so this is the long way. And then we'll see kind of the short way. We need to subscribe to this observable stream which is then going to give us a result and then from here we can say this.projects = result.
>> Lukas Ruebbelke: All right, let's save the cell.

[00:05:06] Make sure that,
>> Lukas Ruebbelke: Everything is running.
>> Lukas Ruebbelke: You notice here one, two, three, and five. Well, let's verify that if we go to dv.json in the server folder, that is indeed what we were doing. In fact, let's go down here to projects, Project HOLLA, let's save this. Because this is in memory I need to stop the server, restart it, let this run and then when this refreshes, then it better be Project Holla or I'm gonna be quite cross.

[00:06:01]
>> Lukas Ruebbelke: Boom, there we go.