AngularJS Architecture: Create Bookmark

[00:01] In this lesson, we are going to complete the create bookmark functionality in Eggly. In order to do that, the first thing we're going to do is create a method on the BookmarksModel to actually add a bookmark to the bookmarks collection. We'll go "model.createBookmark." We'll accept a bookmark object. From here, we are going to create a unique ID. What I'm going to do next would not work in production. This is for illustration purposes. That is I'm going to create a unique ID based on the length of the bookmarks collection.

[00:49] Generally, you want to let a persistent back-end server handle this, but we are just trying to simulate a back-end server in memory. This is going to work for this example, but if you go to the completed app and start to play around with it, you will run into some unexpected behavior. Just be warned. This is just to illustrate and simulate a back end.

[01:15] From here, we are going to push the new bookmark object into the bookmarks collection. Then let's go into the createBookmarkCtrl. Let's inject some of the services that I know we're going to need. We're going to need the state service, the stateParams service, and the BookmarksModel. I also like to start out my controllers with a top-level reference to this. Then we are going to create some methods that we're going to need in this controller, the first one being a method called "returnToBookmarks."

[02:05] What this is going to allow us to do is navigate back to the bookmark state if we cancel creating a bookmark or we've completed creating a bookmark and we need to go back. We are going to go to eggly.categories.bookmarks. We're going to pass in a category parameter. We're going to call stateParams.category.

[02:42] Let's create another, more descriptive method called "cancelCreating." All this is going to do is call returnToBookmarks. Then we will create a method to actually create the bookmark. It's going to accept a bookmark object. Then we are going to delegate this operation to the BookmarksModel. Once we have called bookmarks createBookmark, we are going to return to the bookmark state.

[03:25] I'm going to create one more method, called "resetForm." What this does is it pre-initializes the object that we're binding the create form to. Then it will allow us to reset it if we were to stay on the page or to just ensure that it's set to the exact state that we want every time we load the page.

[03:51] We're going to create an object on the createBookmarkCtrl, called "newBookmark." This is just a plain JavaScript object with a title property, a URL property. We're going to give it a category property, and we're going to set it to stateParams.category. Then what we can do is when this loads, we will just call resetForm.

[04:24] We have methods here that we've defined, but they're not available to be called from the view. We need to actually attach those to the instance of the createBookmarkCtrl. How we're going to do that is we are going to say "cancelCreating = cancelCreating." We're just creating a reference here, on the bookmark controller instance, to the methods that we want to wire it up to. This is just a nice way of delineating what is private and what is public.

[05:13] Now that we have completed the bookmarks createBookmarkCtrl, let's hop into the bookmark create template. We need to update this to use the new controller syntax in that when you use controller syntax, you have to reference things explicitly. For instance, createBookmark becomes createBookmarkCtrl.createBookmark. References to the newBookmark need to be preceded by the createBookmarkCtrl reference, as well as on cancelCreating.

[05:46] Let's hop into the browser and see this in action. I'm going to refresh the page. We'll click "Create Bookmark." I'm going to enter in a bookmark title, hit enter. You can see that the new bookmark that I created was added to the collection, as well as we went back to the Development category state.

[06:10] I can go here. You can see we are in the create state. When I click "Cancel," we go back to the Development category state. This covers the functionality to create a bookmark. Stay tuned for the next lesson, where we will add in the ability to edit an existing bookmark. See you soon.