Angular 13 Fundamentals

Angular 13 Fundamentals CRUD on a REST API

Learning Paths:
Check out a free preview of the full Angular 13 Fundamentals course:
The "CRUD on a REST API" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through implementing the course project's save, create, update, and delete functions. Locating the services URL, subscribing to services, and updating the displayed data is demonstrated in this segment.

Get Unlimited Access Now

Transcript from the "CRUD on a REST API" Lesson

>> The one thing that I want to point out here, is that if we go to a package.json. You'll notice here that I've modified the start scripts, so I have my start, this running NPM run serve all. And what this is doing is, using concurrently, it's calling run serve API and run serve web, well serve web is a pretty basic angular command, so I'm just saying mg serve and I'm putting this on port 4300.

[00:00:38] And I am saying go ahead and auto open the app, so this is where when I run this, we just open it up in a browser tab, over here, survey API. We're using JSON server and we're pointing it to this db.json file inside of the server folder. And what's really cool about JSON server is that, it takes a JSON file and it converts it into a fully featured REST API.

[00:01:22] So I'm gonna just generate one more, I'm gonna convert this to a string as well and then I'm going to restart this and everybody will see what I am talking about, so title Component driven architecture, go and save this, let's go back into our command line. And, I'm just going to shut this down and we're going to start it up again, we can see that it's running and so if we go into our There we go, it's on, so I'm gonna go to localhost 3000, and you'll see here, you have this landing page.

[00:02:19] But if I go to courses, you can see that, this is what's in the JSON structure here, that we had in db.json. But if I go back, you can see that it also has lessons, so as fast as it took me to type it, is how long it took me to expose a local REST API.

[00:02:41] So now, with that said, let's go into our service here and let's go to our courses service and let's build this out. So, let me make sure that, in my app module, I have HTTP client module, that's good, so, first thing so I don't get burnt, like I did last time.

[00:03:18] And from here, what I'm going to do is, I'm just going to create a constant called base URL, and this is going to be localhost 3000, if I'm not mistaken, hopefully that's correct. And, I'm just going to create a local property called model and this is going to be courses and we'll see this come into play in just a moment.

[00:03:52] And I'm going to create a method, and this one is going to be private and it's gonna be called Get URL. And all this is going to do is return a string of, this URL, forward slash this dot model, all right? And so now, I'm going to create a method called all and is going to return this dot Well, what do we do here, where is the service?

[00:04:44] So if I go up top, we need to inject it, so we'll go constructor private. Now we're just gonna go HTTP, HTTP and, There we go, just gonna make sure that I am recording this correctly, very good. And now that I've injected the service, we're going to go this http, get and you'll see here that it takes a URL and a bunch of optional stuff and so get, and then from here, we can just go this.get URL.

[00:05:33] All right, and now let's see what happens, so in theory, this should work, so let's go into our courses component here. And what we're going to do, I'm going to do something that is a transition step, initially is we're going to go and we're going to go this, course is service, all Subscribe, result equals.

[00:06:38] Equals result. All right, I'm going to just type this to any for just a second, there we go, let me save this and let's see what happens. 404 not found, so you can see here that the reason why this is not working is, I believe I've misconstrued my Get URL function here.

[00:07:28] So we'll go back, we'll troubleshoot this real quick and let me get rid of this, so I think I had one too many four slashes, there we go. All right, so if we refresh this, you'll see that in the network, that I'm calling, the localhost 3004 slash courses and I am returning this to be rendered inside of the component here.

[00:08:09] Now what we can do is, now going to delete this, is I'm going to build out the other, the bullets a 1, 2, 3, just a few more methods rather to do full CRUD. And so, I'm going to make one more additional convenience method, which is going to be, get URL with ID and it's going to take an ID and it's just going to return, the start get URL, so this is just kind of a wrapper function.

[00:08:59] And you'll see why this is important in just a moment, we'll go here and so, If you wanted to find or rather get a single item in the collection, so what I can do here, let me just go back to local host. 3000 courses is you'll see here that if I wanted to get just this one, that I could put the ID in and it returns just that single course.

[00:09:41] And so, this is where being able to generate a URL that also has the ID, Is relevant when you're dealing with a specific item and not the collection at large. So get URL with ID, we'll just pass this through and there we go. So, three more methods that we can create real quick, create is going to be return this .http post and this get URL because we are dealing with a collection.

[00:10:26] And, we're going to pass in the course, now what I like about this, is you'll notice that I am Creating these methods that are communicating with the server, but this is all they're doing, that it's very very thin. And ideally you have a layer that communicates with the server and handles that piece and then another layer that is responsible for managing state.

[00:10:59] So here we'll go HTTP, put and In this case, it'll be get URL with ID and this will take the course ID because we're dealing with a single item in the collection. And then, what we'll do is, we'll do delete, as well, so In this case, this will just take an ID, return this .HTTP delete.

[00:11:34] And this dot get URL with ID and it's going to just take in the ID, all right? So, this is full CRUD, this service, and what I want to just call out before we go any further is that, this code is very, very similar. It's very, very fine grained and what we are delineating on, is just the verbs that we're using, and how we're constructing the URL and the payload.

[00:12:22] But every one of these methods is a single line of code and so this when you're writing code, this is what I consider to be kind of, I don't wanna say, the gold standard or the Holy Grail. But this code is very very easy to test and to reuse and to extend and generate, so With that said, let me do one more example, we're going to do save course, the question is, are we dealing with an existing course or a brand new course?

[00:13:11] And so this is where I use a simple kind of, I think of it as kind of an up cert, but I'm basically saying, if it has a course ID, in other words, if it exists and it's not null, then what we're going to do is, we are going to Update the course, and if it doesn't, then we're going to create the course, so if it has one, then we're just gonna call this update course.

[00:13:50] We're gonna pass it in, If not, then we're going to call create course and pass it, all we're doing is because it does something slightly different. We are creating a method to separate the two and then we'll go courses service. In this case update, will pass in the course and I will subscribe here as well.

[00:14:20] We'll go result and what I want to do when this happens is I want to essentially for this case, for simplicity sake, I just want to get all of the courses so, we'll just go fetch courses. And you'll notice here that, I'm already doing all of this, up in the in it, so remember when I said that in it, really should be used to just delegate out.

[00:15:01] This is a perfect example of that I don't need to do this logic in here, I can just call a method that does that on our behalf. So, now when this completes, all I wanna do is I just want to rehydrate, the courses so I'll go here like this and we'll save this here.

[00:15:26] The difference is I think I had create an update, so now this should be correct, create course, create update course update, so let me go ahead and Save this and let's see, if this work, so we'll go here and actually let me go back here just so we can keep a record of the API and we'll go new course.

[00:16:02] Super awesome, y'all, holler and definitely a favorite, let me save this. I mean shocked, I can't believe it, let me refresh this, celebrate good times, come on. All right, how cool was that? I mean, there was a sword hanging from the ceiling that I need to hurry up and get this finish and I whipped out a sweet service.

[00:16:38] To interact with the REST API in about, let's do some math here, hold on, just wait, less than 50 lines of code and I feel like if I deleted some of this stuff that, I could probably get it down to like 40, I'm so close. Yeah, I don't really, that's why I start doing funny stuff to make it fit, so anyways, you'll notice here that incredibly conventional, incredibly concise, compact, and then within our component.

[00:17:28] We are able to then just call out to our service and make that work, now because we're not using NGRX, we are doing a few little kind of transition concession steps, to rehydrate the course on our behalf. But technically, or typically what I do is that when I am I mutating something at the data base or the data layer, I will go ahead and once I've done that I will just call and refresh that data structure, so I have the latest.

[00:18:07] So one of a big issue when you're dealing with Full Stack applications is when your front end becomes stale because there's newer data on the server and how do you reconcile that? So, unless there's a good reason why, if I do a mutation at the data layer, I just will go ahead and rehydrate that collection from the server.