The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

AngularJS Architecture: Edit and Create Bookmark States

AngularJS Architecture: Edit and Create Bookmark States

12:09
In this lesson, we continue to dig into ui-router while doing some significant refactoring to our Eggly application. We will start out by removing MainCtrl entirely from the application as we start to move functionality to more appropriate places with the application. We will build out the edit and create sub-modules to include the states and controllers for editing and creating a bookmark. With our states defined, will leverage them to manage our view instead of the ng-if statements we were previously using. We tie it all together by using CategoriesModel to track the current category and provide functionality to the BookmarksListCtrl. We cover a lot of material in this lesson as we start to apply the concepts covered previously to finalize functionality in the application.
Watch this lesson now
Avatar
egghead.io

In this lesson, we continue to dig into ui-router while doing some significant refactoring to our Eggly application.

We will start out by removing MainCtrl entirely from the application as we start to move functionality to more appropriate places with the application. We will build out the edit and create sub-modules to include the states and controllers for editing and creating a bookmark. With our states defined, will leverage them to manage our view instead of the ng-if statements we were previously using. We tie it all together by using CategoriesModel to track the current category and provide functionality to the BookmarksListCtrl.

We cover a lot of material in this lesson as we start to apply the concepts covered previously to finalize functionality in the application.

Avatar
Andy

Since the routing has been replaced using ui-router, i have just noticed on completion of this video that when switching between categories, there appears to be the 'Create a Bookmark' button flashing between the different views and then getting moved down when the correct category view is displayed. This also appears to be the case on close inspection of the tutorial. Can you please suggest a possible fix for this. Many thanks :)

In reply to egghead.io
Avatar
Andy

In the following videos, there were some small changes made to the bookmarks.html template and this seems to have sorted out this display problem. I think this was caused by the first div in the bookmarks.html template not rendering immediately. I am not sure what caused this and also not sure what solved it. I can see from the tutorial video, that this issue is also not present on the following videos.

In reply to Andy
Avatar
Nolan

Shaun, great content. An architecture / best practice question. With ui-router do you always require one parent with sub nested views or can you have two parents withs ome sort of relationship? Example, could you have 2 categories (not that it would make sense, but for illustration purposes) one for vertical tabs and one for horizontals tabs / states. Left tab would filter subject matter by topic whereas lets say the top categories filters by roles / groups using the bookmarks. So I could end up with sub matter development clicked on left and registered users on top and the result would be the correlation of the two axis in the matrix.

Avatar
Nolan

lol and when I say Shaun, I meant Lukas ... apologies.

In reply to Nolan
Avatar
Maanas

The code which is available in github is not in sync with the video. In github all the controllers are used as
MainCtrl as main and all reference of scope has been changed to main.*. However in the Video it is still showing the old code. Though the code in github is latest and better practise but the same is not captured in the video. I had some tough time in understanding that and had to jump out of the course and watched / read other material to understand.

Avatar
Tim

For the ui router architecture the state's are moved out of the main.js and into they're respective controllers and configured there. I was just wondering if this is the best practice, so that I may continue to do it this way. Thanks!

Avatar
Tim

Also, noticed that the service is written inside of the model, is this also best practice?

Avatar
Lukas

@Tim,
About states: yes we really like this approach because it keeps the logic for a particular feature grouped within that feature. It is also congruent with the Angular's implementation of a component, both in Angular 1 and 2.

About services: this isn't so much a best practice as it is a convenient naming convention. We used the model naming convention simply because the service is basically modeling a particular entity (categories or bookmarks). If the service had been handling something like authentication, we would not have used the model naming convention.

In reply to Tim
Avatar
Steven

Hi Lukas
Where does the "Create Bookmark" button go when we switch to the edit or create states?
Why is it disappearing?
Thanks!
Steven

In reply to egghead.io
Avatar
Lukas

Hey Steven,
This is because the containing ui-view element serves as a conduit for the child templates of the bookmarks state. In other words, whatever HTML is initially placed within the ui-view will be displayed as long as there is no activated state. Once the bookmarks.create or bookmarks.edit state is activated, however, the contents of ui-view will be replaced with the appropriate template.

In reply to Steven
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?