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

AngularJS Architecture: Review

AngularJS Architecture: Review

3:44
In this lesson, we review the high level concepts that we covered over the course of this series including file structure, sub-modules, data models, ui-router and animations.
Watch this lesson now
Avatar
egghead.io

In this lesson, we review the high level concepts that we covered over the course of this series including file structure, sub-modules, data models, ui-router and animations.

Avatar
David

Thx Lukas for this tremendous serie.
In my previous AngularJS apps we were already using most of the best practices explained except...ui-router.
This is going to be a huge improvement. This example of using a specific module/controller/ui-view for creating and for editing a bookmark is really nice to avoid monster controllers!

In reply to egghead.io
Avatar
R.

First—Love this series! Thank you to everyone who made this possible, especially Lukas.

I created a test application along with these lessons for an imaginary clothing store. I created one master JSON object, so the whole db can be loaded and cached using only one http request:

data : {
shirts : [{id:1,name:'Shirt One'},{id:2,name:'Shirt Two'}]
pants : [{id:1,name:'Pants One'},{id:2,name:'Pants One'}]
shoes : [{id:1,name:'Shoes One'},{id:2,name:'Shoes Two'}]
}

And I'm using a 3 column layout:

Categories nav | Collection list | Model view


Shirts* ( active ) | Shirt One* | Shirt One
Pants | Shirt Two | Details…
Shoes | |

Using the data models from the series, I load the JSON and cache it, but 3 $http requests get fired on page load because all 3 views need access to the data that isn't cached yet.

I solved this by using resolve in the parent $state config to resolve the data before any view is activated.

The only other way I found to do this was to use $scope inheritance and $watch the parent scope for the data, but this felt very messy.

Is resolve the only clean solution in this situation or did I miss something?

Thank you!

Avatar
Tim

For these lessons on my app, this line always return undefined when you refresh the page. On the off chance that a user would do this, how can I fix this.

model.getCategories = function() {
//console.log(categories) always returns undefined
return (categories) ? $q.when(categories) : $http.get(URLS.FETCH).then(cacheCategories);
};

Avatar
Lukas

@Tim, if you want data to persist through a page refresh, the best solution is to use cookies or local storage (or both!). The module we like to recommend for this is Auth0's angular-storage module found at https://github.com/auth0/angular-storage. Once you get that set up, you can add a method call inside of cacheCategories that not only caches them in memory but also in cookies/local storage. Hope this helps!

In reply to Tim
Avatar
Paul

Lukas, You are a fantastic teacher. Really good series. Many thanks. Paul

Avatar
Lukas

@Paul Thanks! Totally made my day! #highFive

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