AngularJS Architecture: Review

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

R.
R.
~ 6 years ago

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!

Tim
Tim
~ 5 years ago

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

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 5 years ago

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

Paul
Paul
~ 5 years ago

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

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 5 years ago

@Paul Thanks! Totally made my day! #highFive