AngularJS Architecture: Review

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!

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); };

@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!

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

@Paul Thanks! Totally made my day! #highFive