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

Check out a free preview of the full Angular 9 Fundamentals course:
The "HTTP Client Solution" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas live codes the solution to the HTTP client exercise.

Get Unlimited Access Now

Transcript from the "HTTP Client Solution" Lesson

>> All right, who wants to see the solution? So, all right. Welcome back. Thank you for persevering. Let me show you the answer, the solution to this particular challenge. So hopping into the code. We need to finish these two methods here. So for update, the difference is when you are doing a post or a put to a single item in a collection versus the collection itself, you have to denote that with an ID and so what you can do here is although return this HTTP, post This geturl and we're going to see very quickly, an opportunity to optimize this.

[00:01:18] Course ID And then we'll pass in the course. So, I'm gonna leave this here for a second. Hopefully everybody is there. Your brains are ahead of me by three steps. For delete all I need to do is just Call delete and then just hit the endpoint that has the ID.

[00:01:54] And in this case I am gonna do course. Well, we can just do courseId it's fine. And so you notice here, these are almost identical. The one thing I do it's updating I do put they're almost identical. I don't know of a good reason why I only posted put, I haven't.

[00:02:18] I think they're pretty much the same, there may be some philosophical difference but just semantically for me post is great. Put is I'm basically putting this back. So that is what makes sense to me. And if we look at these URLs these are almost identical. So what we can do is get urlById, and I'm just going to pass an ID in.

[00:02:48] And so I'm just optimizing this kind of on the fly. So I don't have to keep doing the same stuff over and over. Now the one thing that I've noticed is I don't think I have the, model doesn't have an end, or a forward slash. I'm gonna add this in here and there we go.

[00:03:15] And so now what I can do is this geturlByIdD. And we'll just pass in course ID and then over here, we'll chop this out. UrlById, and we'll just in this case put courseId. Boom all right? Then what I can also do here, just because I know you geturlById and we'll just pass in courseId.

[00:04:02] So just doing a get operation on this endpoint. And from here, I can actually delete this, I don't need it. And we have a pretty functional remote application service. So let's hop into our course component. And Yes, so the base URL contains the slash here, the forward slash, which then we put the courses on that and then after that, then we have to add that.

[00:04:35] So it would have broke and then we would have basically had to go back and fix that. So a good catch. So what was being pointed out is that the base URL has a forward slash, but I don't have one here. So when I put the ID in it would look like that, and that would work.

[00:04:50] So, good catch. I've actually been hit by that many, many times. All right, so now, what we can do is just take this here, I'm just going to paste this in. So these are almost identical the differences we're doing, update or create. Then from here, same thing. That when we're doing this operation and so this is a bit of a, I think a transitionary step in I think it's started to flesh out and we got more into advanced concepts.

[00:05:35] You would not see this but for now, this is totally fine. What we do need to do is where we're calling load courses, we also need to Reset selected course, and so this is where this gets super, super tricky. I need to make an architectural decision right now of how do I want to handle this?

[00:06:22] This is how I'm gonna handle it. I'm gonna create a new method. So my temptation was in load courses, to just add this method in here like this. The problem with this is that I'm breaking the single responsibility principle. More importantly, is that I'm coupling this call to get all the services to this other reset selected service.

[00:06:45] And so what happens if I actually want to get the services but I don't need to reset and so you're better off being very intentional about that kind of thing. So, typically what I'll do is instead of going and forcing it at, like a fine grained component level, which is here like I don't want work function level, is I'll create a composition method to do this.

[00:07:11] So in this case, I'm just going to go refreshCourses here. And what this is gonna do is resetSelecedCourse, this.loadcourses. And so this is again I would consider this a transition step, but it is going to solve our problems. So now, just go here. Boom, boom. All right. And let's see if this is going to work.

[00:07:48] So here we go. Let me create a new course test, I no longer have the energy to be clever, let's Submit. And notice when I submitted it, it reset and then it showed up at the bottom and then I can delete it. I can update it Here, Submit, actually, let us say I am 40% done, and I love this course by Marc G, Submit.

[00:08:22] And notice it is now updated here and it is also refreshing and so now, at this point, this is, I would say a pretty functional application, but there's still some improvements that we can make, especially around component driven architecture.