This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

AngularJS Architecture: Refactor to a data model

5:53 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Fang

I was expecting to see a video that shows me how to take all parent scope function to child. You did take model data to a separate service. But is all the categories and bookmarks functionalities are still sitting in the MainCtrl ?

In reply to egghead.io
Avatar
Lukas

MainCtrl is going to die eventually. :D

In reply to Fang
Avatar
Aviad

Hi,

Why is it ok to remove the ng-click=setCurrentCategory(category) from the link?
Where we are taking care of the filter now?

Thanks,
Aviad.

Avatar
Andres

Hi there,

it looks like he's got a ui-sref calling a UI state. Although the filters are probably not working because the methods are in the MainCtrl and the bookmarks and categories data are not available for them (not sure as I'm learning and is getting quite hard to understand this lesson).

In reply to Aviad
Avatar
Terry

Would there be any difference if you'd used a factory instead of a service in the categories & bookmarks models?

Avatar
James

Did I miss where he renamed the BookmarksCtrl to BookmarksListCtrl?

Avatar
Alex

Two issues:
1) The filters on the bookmarks are no longer working after this lesson.
2) I'd say changing variable names requires at least a mention in the lesson.

Avatar
Leo

I realised that to.

Did I miss where he renamed the BookmarksCtrl to BookmarksListCtrl?

In reply to James
Avatar
Kishore

if we remove "/categories/Development" from URL , bookmarks section will not be shown , because we removed the named view from from categories.js, will this be fixed in next videos ?

In reply to egghead.io
Avatar
Kishore

to fix filter issue. in bookmarks.tmpl.html change the filter as follow
"filter:{category:bookmarksListCtrl.currentCategoryName}"

as you said using ui-serf we are setting currentCategoryName in BookmarksListCtrl, and its available in view now

In reply to Andres
Avatar
Pragmatic Bits

Hi, does anyone know why do I get this from Webstorm IDE, using this lession branch?

Error: [$injector:unpr] Unknown provider: BookMarksModelProvider <- BookMarksModel

However, if I simply run it as python -m SimpleHTTPServer and navigate to http://localhost:8000, it works without issues.

Avatar
Tom

I realised that to.

Did I miss where he renamed the BookmarksCtrl to BookmarksListCtrl?

Me too.

I am going to be honest I am quite disappointing with the quality of some of these videos. What they teach is good but they need a bit more polish. As a regular user of laracasts the quality doesn't touch those videos and laracasts is a 3rd of the price.

In reply to Leo
Avatar
Bill

Well, this video has issues...

By saying it is working, you will find it does not work. This video was confusing in the beginning. Removing ng-click breaks the line item book mark action without href link.

Suggest the following format to explain actions...
What am I doing now?
Show how it works now before the change.
Why did I make the change? Very Important.
Do make the change!
Test the change made by showing it in the video. Very Important.
Remember to save file after code change.

Best Wishes, Bill.

Avatar
Andrew

You need to include the new JS file, BookMarksModel in index.html

In reply to Pragmatic Bits
Avatar
Andrew

It's in the route definition, he did show it briefly and it was explained in more detail in the previous video, FYI. It's called, 'controller as' syntax.

In reply to James
Avatar
Rahul

I am going through this tutorial now and I would've struggled to find out why the bookmarks weren't showing up if I hadn't read the comments. I would have really appreciated the video to be in more detail and assume that not everyone is on the same skill level. In short, please do not miss any details, no matter how trivial they are.

Avatar
Andrey

To fix some issues, make sure that you have correct definitions:
1) bookmarks.js: controller: 'BookmarksListCtrl as bookmarksListCtrl',
2) categories.js: controller: 'CategoriesListCtrl as categoriesListCtrl',
3) bookmarks.tmpl.html:

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.

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.

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.

We are going to define a service. We'll call this BookmarksModel. Let's just paste this in here.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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