AngularJS Architecture: Edit Bookmark

[00:00] In this lesson, we are going to complete the functionality for editing a bookmark in Eggly. We're going to start with the BookmarksModel, add in the business logic, then make that available to the bookmark edit controller, and then update the template.

[00:17] The first thing that we're going to do is create a convenience function called "findBookmark." That accepts a bookmarkId. We are going to return the results of a lodash method call. We are going to compare the bookmark.id in the iterator to the bookmarkId that we're passing in as a parameter. If it matches, then it will return that bookmark object.

[01:02] Then what we're going to do is make this available by creating a method called "getBookmarkById" that takes a bookmarkId parameter and then returns the appropriate bookmark as it is called from the controller.

[01:27] Before we get started, we're actually going to resolve this with a promise. We'll inject the q service into the BookmarksModel. From here, we're going to create a deferred object. I like to go ahead and just finish the return statement right when I start it, because the pattern's always the same, by returning the deferred.promise object. This then frees me up to just figure out how I'm going to resolve it in between these two lines.

[02:00] From here, we're going to say, "If bookmarks exist." Then this is fairly easy. We just have to call deferred.resolve findBookmark and then pass in the bookmarkId. If the bookmarks do not exist, then we need to make that method call or make the method call to get the bookmarks and then find the appropriate bookmark from the collection that is returned.

[02:31] From here, we will call model.getBookmarks. Then, in the callback method, we are going to deferred.resolve. Then we will just resolve it like we did above. This is how we can get the bookmark by ID and then make sure that we always have a bookmarks collection.

[03:03] What I'm going to do now is I'm just going to copy this. Let's hop into the getBookmarks method. Every time we call getBookmarks, we're calling the http service and refreshing the bookmarks collection. Now that we're editing a specific bookmark, we do not want to overwrite those changes.

[03:23] Let's go ahead and replace this with a call that allows us to cache this. If bookmarks exists, we're just going to resolve it with the existing bookmarks. If not, then we're just going to make the http.get call. From here, we'll take the result. We will resolve it with a cache version of the bookmarks.

[04:11] Let's do one other thing real quick. We have the createBookmark method in place from the previous video. Let's go ahead and create an updateBookmark method. What we're going to do here is we're just going to get the index of the bookmark that we're dealing with. Again, we're simulating a back end in memory. This is purely for example purposes.

[05:02] This is actually taking a single bookmark argument. Now that we have the index, we can just say, "At this index within bookmarks, go ahead and replace it with this new object." This is just for example purposes, but it will allow us to edit the bookmark object in memory.

[05:29] Now that we have completed the BookmarksModel by introducing the findBookmark method, getBookmarkById. We've updated getBookmarks to actually use a cache version of the bookmarks, and then we've introduced this updateBookmark method.

[05:45] Let's hop into the bookmark edit controller and build this out before we update the template. The first thing we're going to need is to inject some services. We'll go with the state service, stateParams, and the BookmarksModel. Then we'll create a top-level reference to this just as a force of habit.

[06:14] Then let us start to build out the methods that we need for this controller. The first one that we need is a method to returnToBookmarks. This is exactly like we saw in the create bookmark controller. We are going to go to eggly.categories.bookmarks. We are going to pass in a category param.

[06:58] From here, let's create a method to actually call the returnToBookmarks that is a little more descriptive, called "cancelEditing." All this does is calls returnToBookmarks. This just reads a little better in the view.

[07:13] Now let us get down to the star of the show, the updateBookmark method. Now it's time for us to actually create a method to update the bookmark, but before I do that, I want to actually build out the method that we're calling to actually get the bookmark that we're editing.

[07:42] We'll go "BookmarksModel.getBookmarkById." We're going to call stateParams. Pass in the bookmarkId. When this resolves, we're going to take the bookmark that it is returning. If the bookmark does indeed exist...You could put in any ID, and possibly, nothing could exist...then we're going to do something.

[08:09] If not, we'll just go ahead and returnToBookmarks. There's no point in going any further. If the bookmark does exist, we are going to create a reference to that and call this bookmark. What I'm also going to do is I like to create a copy of that that we're actually going to be editing.

[08:36] If you edit an object directly in memory, there's no way to back out of it. By creating a copy, such as a property called "editedBookmark," we can make all the changes we want to editedBookmark. When we're done, we just copy it back to the bookmark reference. This is a way to make edits and have it not be so destructive.

[09:12] Now that we've actually gotten the bookmark and we've created this bookmark reference and this editedBookmark, then we can create a method to actually update the bookmark. We're going to create a method called "updateBookmark."

[09:29] From here, we are going to copy the editedBookmark back to the bookmark. Using angular.copy again, we're going to create a copy of that and assign it to bookmark. Then we're going to call BookmarksModel.updateBookmark and pass in the editedBookmark bookmark. From there, we are ready to returnToBookmarks.

[10:09] Now we just need to make these methods available on our controller. We will create a method for cancelEditing and do the same for updateBookmark. Now we have not only built out the model, but we have built out the controller.

[10:44] Let's go ahead and update the template appropriately. From here, we're displaying the editedBookmark, but let's go ahead and just show the bookmark so we can see which one we are editing.

[10:57] We'll update this to point to the controller, appropriately, because we're using "controller as" syntax. Then you can see that we're editing the editedBookmark by binding to it in ng-model, here.

[11:14] Let's go ahead and do one other thing real quick. In the bookmarks template, I had this ng-class that sets this active class if it is the right bookmark. This is no longer necessary because we are actually going into a specific state. It's pretty obvious what bookmark we're actually editing.

[11:36] Let me hop into the browser. Let's see this in action. I'll go ahead. We're going to edit this. AngularJS for the win. We'll click "Save." You can see here that it saved it. You can go here. You can see right here. We'll go back. We'll go here. You can see it is persisting in the bookmarks collection.

[12:05] This covers the edit bookmark functionality. Stay tuned for the next lesson, where we will learn how to add in the delete bookmark functionality. See you soon.