Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Building an Angular App: Simple States

8:44 Angular 1.x lesson by

We are going to learn how to manage simple states within our controller. We are going to learn how to toggle between the editing and creating bookmark states and how to sequence those interactions in the controller.

note: The code for this lesson can be found on Github. The tags correspond to the lessons.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We are going to learn how to manage simple states within our controller. We are going to learn how to toggle between the editing and creating bookmark states and how to sequence those interactions in the controller.

note: The code for this lesson can be found on Github. note: the tags correspond to the lessons.

Avatar
shawn

OK, this post got duplicated as not sure how orig got under controllers
Further fix for ng 1.3.8 - the code to reset, I needed to explicitly set the member as it was setting an object, thus the comparison is using an object vs. string.

function resetCreateForm() {
            $scope.newBookmark = {
                title: '',
                url: '',
                category: $scope.currentCategory.name
            };
        }
In reply to egghead.io
Avatar
Nate

I'm wondering why you are declaring functions and then attaching them to the scope. Can't this be accomplishing in one step?

For example, you have the following:

function startCreating() {
$scope.isCreating = true;
}
$scope.startCreating = startCreating;

Can this be written as follows?

$scope.startCreating = function () {
$scope.isCreating = true;
}

Avatar
Carlo

Couldn't we achieve the same result with just two functions?

function setCurrentAction(action) {
    $scope.currentAction = 'action';
}

function cancelCurrentAction() {
    $scope.currentAction = null;
}

Doing so we could also re-use quickly implement additional actions.

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.

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.

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.

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.

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.

I've then created some convenience methods to manage these variabls. StartCreating, cancelCreating, startEditing, and cancelEditing.

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.

I've then made this available to the view by attaching these methods to $scope.

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.

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.

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.

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.

Return isEditing and we are not creating.

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.

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.

Let's go ahead and do the same thing for editing, like so.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?