AngularJS Architecture: Refactor to a data model
Let's continue to refactor Eggly by introducing a valuable concept known as model promotion. We will start to extract the categories and bookmarks collections from the MainCtrl and promote them to their respective models. We will then learn how to consume those models at the controller level to populate the view.
[00:01] In the previous lesson, we introduced the controller as syntax which gave us clarity over the implied prototypical inheritance that allowed the bookmarks controller to implicitly pull properties and methods from the main controller even though there was no obvious connection between the two.
[00:23] In this lesson, we are going to introduce an important technique of promoting collections to models so they are available to the rest of the application. In fact, by extracting out the collections into a service, it allows us to leverage those collections in multiple places as you will see when we start working with categories further along in the series.
[00:51] The first thing we would do is promote the bookmarks collection from the main controller into the bookmarks model. Let's hop into the main controller. You can see we have this bookmarks collection here. I am just going to cut this out. Let's hop into the bookmarks model.
[01:14] We are going to define a service. We'll call this BookmarksModel. Let's just paste this in here.
[01:23] Now, let's create a local variable called model, assign it the value of this. We're no longer attaching the scope. We can just delete that.
[01:45] What we will do now is we are going to expose the bookmarks collection via a method called getBookmarks. All this is going to do is just return bookmarks. I'll hop into the bookmarksListCtrl. The first thing we need to do is to actually inject the BookmarksModel like so. Then, let's copy that. We'll say bookmarksListCtrl.bookmarks = BookmarksModel.getBookmarks.
[02:28] What we can do is hop into the template. You can see that we're doing bookmark in bookmarks, but we need to be explicit because we're using the controller as syntax. We would do bookmarksListCtrl.bookmarks.
[02:43] Let's hop in here. Refresh the page. You can see that the bookmarks are still loading but we're pulling from the bookmarks model. Let's go ahead and do the same thing for categories.
[02:59] We will hop back into the main controller. We're just going to chop out the categories. Let's go to the categories model. We will create an actual categories model service. We'll paste this in. Model = this. We'll go model.getCategories, return categories. Just type this up real quick.
[03:22] Now, let's hop into the CategoriesCtrl. While we're here, let's go ahead and take care of the controller as syntax. Refactor this as CategoriesListCtrl, also a list of categories. We no longer need scope. I'll just paste in the categories model.
[04:16] From here, we'll do our categoriesCtrl = this and categories = getCategories. Let's go ahead and hook this up in the categories template. We'll go here and it's category in categoriesListCtrl.categories. Since we're here, let's just go ahead and delete this ng-click. We no longer need this. Just part of refactoring, cleaning up as we go along.
[04:55] Let's refresh the page. Categories and bookmarks are now pulling from their respective models. Everything is working. Just for review, we extracted or promoted the bookmarks and categories collections into their respective models and made it available via a property, in this case getBookmarks or get Categories and it returned that.
[05:24] Then, in the controllers, we injected the model and requested the model to return us the appropriate data structure which we assigned to a variable and then, bound to that in our template.
[05:40] Stay tuned for the next lesson where I'm going to actually show you how to pull that data structure from a remote file using the http service. See you in just a moment.