AngularJS Architecture: Refactor to a data model

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

Aviad Shikloshi
Aviad Shikloshi
~ 6 years ago

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.

Andres
Andres
~ 6 years ago

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).

Terry DI LUZIO
Terry DI LUZIO
~ 6 years ago

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

James
James
~ 6 years ago

Did I miss where he renamed the BookmarksCtrl to BookmarksListCtrl?

Alex Guirguis
Alex Guirguis
~ 6 years ago

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.
Leo
Leo
~ 6 years ago

I realised that to.

Did I miss where he renamed the BookmarksCtrl to BookmarksListCtrl?

Leo
Leo
~ 6 years ago

+1

Kishore Nadimpalli
Kishore Nadimpalli
~ 6 years ago

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

Pragmatic Bits
Pragmatic Bits
~ 6 years ago

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.

Tom
Tom
~ 5 years ago

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.

Bill Ott
Bill Ott
~ 5 years ago

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.

Andrew
Andrew
~ 5 years ago

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

Andrew
Andrew
~ 5 years ago

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.

Rahul Nair
Rahul Nair
~ 5 years ago

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.

Andrey
Andrey
~ 4 years ago

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: <div ng-class="{'active':isSelectedBookmark(bookmark.id)}" ng-repeat="bookmark in bookmarksListCtrl.bookmarks | filter:{category:bookmarksListCtrl.currentCategoryName}">