This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Services CRUD Methods" Lesson
[00:00:00]
>> And so that was Pretty simple, I think the big thing is you have to be aggressive about application state and moving that out of components. And so I'll talk about this more when I get into the bunker of an architecture. But in regards to state management components should do two things.
[00:00:30] One, it should consume just enough data to satisfy and render its templates. It should also only capture events from the user and delegate that, further up the stream into what I would say, a logic layer. Or into a service that handles that business logic. And so what you want, and so this is really fundamental for state management.
[00:01:00] Is you want to keep as much state out of your components is possible. How you accomplish that is by having very razor-thin components and rich models. And so I think the first thing when it comes to state management in an Angular application is keep your components thin, keep your business logic in services, and abstract out as much as you can.
[00:01:28] And the only thing a component should do is consume just enough information to render its template. And if an event happens, it captures that event and then it delegates it back out to a service. And so let me extend this just a bit further. What do I mean by that?
[00:01:49] And so if I go into the courses service, you could imagine when you have a collection, you need to do typically kind of four main things on a collection. Create I'm going to, Skip, gonna do it slightly out of order, but base is create, read, update, and delete.
[00:02:21] So we'll do delete. And on top of that, what I'll do is instead of read, I'll do all, so give me all of this thing or find, just give me one of these things. And so if we go here, and we just think about what this would look like.
[00:02:49] So, for find, it would just take a course ID and it would return a course. For create, it would just take an entire course, update it would also take an entire course. And for Delete, it would take a course ID. And then all, it will take no parameters and it's just going to return this dot courses.
[00:03:28] And so then what I can do is I can set this to private. So I really should try to avoid accessing this directly but expose it through a method. And Now, What I can do is I'm just going to do, Well, more, so I'll fill in, just probably gonna do find, but I will do CREATE COURSE, course so we're just going through and Fleshing this out.
[00:04:15] So update, course, and delete course. And so this is where, now, we're moving if I need to actually modify a collection that is controlled or that falls under the preview of application state versus I would say UI state. Then we need to move that into a service. So this is what I mean by moving business logic out of your component.
[00:04:48] So then if we hop into the courses component, where it says save course What we're going to do is we're doing to do this.coursesService. And We're going to do something here real quick. Cuz the question is, well, if we're saving it, are we creating it? Or are we deleting it?
[00:05:20] So what I'm gonna do is I'm gonna add course as a parameter. This is of course uh-huh, going to be the selected course. But how do we know if this is a new or an old course? Well, I can just check course.id. If it has an ID, well guess what it exists, and we can just go ahead and update.
[00:05:52] But if it doesn't have an ID, then we can go ahead and create. And so notice now we're delegating this out to the courses service versus handling it directly in our component. Even though we're not doing much, you can see we're starting to groom and shift that functionality out.
[00:06:25] so deletecourse, but we're just gonna send in courseId. There we go. And now we are, Just essentially taking this in passing it to the service. Now the other thing that we can do this.courses, And actually I wonder sorry, not they're here. So if you notice course services courses, it's telling us this is private.
[00:07:08] So it can't really stop you but because once it gets compiled JavaScript doesn't have a concept of access modifiers, but instead we will do all. Okay, so we have create, update, delete. And so let's hop back into the code form savecourse, yes. So let me update the HTML.
[00:07:45] So when we hit submit what we need to do is we need to just pass the selected course in. So this should render now. So if I go here, oops. CoursesService.all is not a function. I beg to differ, let's see what I did wrong. Mm-hm. This looks like a function to me.
[00:08:28] Let me check the, I'll just restart the server and do it again. Every once in a while, you'll see that kinda your build server will just be like [SOUND]. I know what to do, and so I, on occasion will have to restart the build server just because it jumps tracks, and so this may or may not be the case.
[00:08:58] But we have been running for a bit so I wanted to go ahead and just do that. So should be going. Let's hop back into our template. There we go. So it actually does seem to be working. So now I select this. And if we go here, you notice delete course, on console logs spell wrong doesn't matter.
[00:09:27] If I go and I create a new Test, set this, well, it didn't even exist, submit. Create course, the reason being is that it didn't, it doesn't have an id. So, id of no. So this is kind of a way to reuse your same form. Over and over, because actually nothing is changing because the model is the same.
[00:09:54] Or if I select it, and then I submit notice it's update course. And it's passing it in. So we are deleting, updating, reading. And so now what we've done is and I think the most important thing is we have abstracted out, not only the data model, but the functionality that's going to manipulate that data model so that we can use it in other places in the application.
[00:10:22] So this is really, really important for state management, that you have a single source of truth. In that when you have application state kind of spread and scattered across your components and across your application, well, what is the single source of truth? How do you know what you are referencing is in fact, the single source of truth or what you wanna know?
[00:10:49] Or more importantly, is because it's shared and it's mutable. How do you know that when the object that you're referencing is safe from somebody else coming in and mutating it without you knowing it. And so, how you start to consolidate that is one, you consolidate your state into a single state tree that you have one source of truth.
[00:11:15] And then you essentially move to immutable operations to allow for when you modify that if somebody is referencing an old for instance, data structure, that it is not going to be kind of changed under your feet. An example of that is or share mutable state, anecdotally is if anybody has ever been shopping on Amazon.
[00:11:45] And, for instance, your significant other in this case my wife, has the same account and so there's been times where I'm like, I really wanna buy this book. And I put the book in the cart. And I'm like, I need to buy some, some air pods because these aren't working.
[00:12:01] I go back into my cart, and all of a sudden, there's a pair of socks and a bouquet of flowers. And this is I think a really good example when I see this I'm like coursed shared mutable state. You've just affected my shopping cart. And so this is how we start from an application level, start to hedge against that is moving your state into a single place and consolidate it and out of your components.