Manage Simple State in an AngularJS Controller

Man 1: [00:00] Welcome to the next video in the Eggly series where I am going to show you how to manage the creating and editing states within the Eggly application.

[00:13] If you go to index.finish.html you can see this in action. For instance, in the default load state you do not have any options at the bottom of the page but if I actually select a category I can now actually create a bookmark for the category that I'm in.

[00:30] If I select this, you can see the create bookmark form. If I'm in the create state and I click on this edit button, it will toggle to the edit state because we do not want to allow the user to create a bookmark and edit a bookmark at the same time.

[00:46] It's this interaction that we're going to program in this video, as well as I can hit cancel and then go back to the default state.

[00:54] If we jump into the code I have went ahead and created some JavaScript to get us started. I have $scope.isCreating, $scope.isEditing, and I've set those to false. This will be the default state.

[01:07] I've then created some convenience methods to manage these variabls. StartCreating, cancelCreating, startEditing, and cancelEditing.

[01:16] The important thing to point out here is that in startEditing, for instance, it will set isEditing to true but it will also set isCreating to false. It does the same thing in Creating.

[01:30] I've then made this available to the view by attaching these methods to $scope.

[01:38] Then in the HTML I have created these two placeholders, essentially where we will put the create form and the edit form in the next videos, but for now these are just placeholders to show that we are toggling between these two states.

[01:56] I have a button that says, "Create Bookmark" with the bookmark state and then I have another .div with editBookmark where that button is actually up here with the pencil icon.

[02:09] The first thing we need to do is create two more methods. We are going to call this shouldShowCreating. We are going to return true if $scope.currentCategory is defined and not null as well as we are not editing.

[02:52] The reason we are checking for current category is because you have to be in a category in order to create a category. Then we'll do the same thing for shouldShowEditing. This will be a little bit simpler.

[03:09] Return isEditing and we are not creating.

[03:22] From here, we just need to make these available to the $scope like so. Then we can hook these up in our HTML. We are going to use ng-if.

[03:43] How this works if this expression evaluates to true then it attaches it to the dom. If it evaluates to false, then it actually removes it from the dom. Ng-if should show creating.

[03:57] Let's go ahead and do the same thing for editing, like so.

[04:03] What we'll do as well is we will go up to this button here and let's attach an ng-click. Let's call the method startEditing. We can also go here and on this button call startCreating. This should allow us to actually toggle between the two.

[04:52] Let's hop into the HTML and see this in action. Now you can see that nothing is showing but if we go to a category now we can see that the create bookmark is showing.

[05:05] Let's click on this edit here. You can see it's toggling to the edit state.

[05:11] Let's just go a step further and add a button to cancel creating. I just pasted this in here. It's calling ng-click cancelCreating. We can do the same thing for editing.

[05:33] From here, we'll just say cancel editing like so. Hop into the HTML. We'll go to a category and then from here I can select this and go into an edit bookmark state, click cancel, and then it goes back to the create bookmark.

[05:57] You can see that the create bookmark state is still showing. Let's actually set this up to toggle ng-if="isCreating." Now we're simply binding to this state here. It's actually just a property here, not a method.

[06:24] Let's go in here and hook this state up. We'll just go ng-if="isCreating." When you click start creating, it will set isCreating to true and then it will show this.

[06:37] Let's refresh. We've got a category. Now you can see that we're toggling between the creating state here as well as the editing state. Now we are back to this default load state.

[06:53] One other thing that we can do is you can see here that if I'm in a creating state and I go to a category that we still have this latent state staying open even though we're in a new category.

[07:08] Let's go ahead and fix that. Let's hop back over to the code and when we setCurrentCategory we are going to cancelCreating and we will also cancelEditing. This will just reset everything.

[07:25] Refresh. We'll go here and then when I click to a new category it resets it back to its default state.

[07:36] Just to review, what we've done is we have created two variables, isCreating and isEditing. Then we've created functions around managing and manipulating those two properties, isCreating and isEditing. We've also created two methods to actually watch those, shouldShowCreating and shouldShowEditing.

[08:01] From there, in our HTML using ng-if we are showing the creating state as well as the creating form as well as the editing state and then using ng-click we are calling either cancelCreating or cancelEditing.

[08:18] This was a little bit of a foundational exercise for the next videos that we're going to do where we're actually going to hook that up to allow you to create a bookmark and edit a bookmark.

[08:30] Having this state in place to toggle between the two and manage it is critical for building out the application.

[08:35] Thanks for staying tuned for this video. I will see you in the next video where we will actually hook up the creating form. See you in the next video.