angularjs - How do I cache dynamic (JSON) content in Angular on app load? -

angularjs - How do I cache dynamic (JSON) content in Angular on app load? -

i trying build demo app dynamic json content needs cached on app load urls (router ui) can accessed immediately.

the "view info jack burton" link @ top shows info after it's been loaded (even then, it's screwy):

example plunker: http://plnkr.co/edit/xizq8cy4zszc9dz5cbpv?p=preview

i need access content "person" other links throughout app, i'm guessing through in-app urls, not sure best practice this.

thanks!

html

index.html <div class="row"> <div class="col-sm-12"> <a ng-href="#/" class="btn-link">home</a> | <a ng-href="#/jack-burton">view info jack burton (only works after it's cached)</a> <div class="well" ui-view></div> </div> </div> home.html <h1>people</h1> <ul class="list-unstyled"> <li ng-repeat="person in people"> <a ng-href="#/{{ person.url }}" ng-click="setpeoplecontent(person)"> {{person.name}} </a> </li> </ul> person.html <h1>{{peoplecontent.name}}</h1> <section id="contact" ng-if="peoplecontent.hascontact"> <h4>contact info</h4> <p ng-repeat="item in peoplecontent.contact" ng-if="contentexists(item.address)"> address: {{item.address}} </p> <p ng-repeat="item in peoplecontent.contact" ng-if="contentexists(item.phone)"> phone: {{item.phone}} </p> <p ng-repeat="item in peoplecontent.contact" ng-if="contentexists(item.email)"> email: {{item.email}} </p> </section> <section id="pastjobs" ng-if="peoplecontent.haspastjobs"> <h4>past jobs</h4> <p ng-repeat="item in peoplecontent.pastjobs" ng-if="contentexists(item.job)"> job: {{item.job}} </p> <p ng-repeat="item in peoplecontent.pastjobs" ng-if="contentexists(item.jobtitle)"> title: {{item.jobtitle}} </p> </section> <section id="goals" ng-if="peoplecontent.hasgoals"> <h4>goals</h4> <ul class="list-unstyled"> <li ng-repeat="item in peoplecontent.goals" ng-if="contentexists(item.goal)"> {{item.goal}} </li> </ul> </section>

json

{ "people": [ { "name": "alexander supertramp", "url": "alexander-supertramp", "contact": [ { "address": "alaska" } ], "goals": [ { "goal": "climb mt everest" }, { "goal": "travel in space" }, { "goal": "become rocket scientist" } ] }, { "name": "gordon bombay", "url": "gordon-bombay", "pastjobs": [ { "job": "hockey coach", "jobtitle": "coach" }, { "job": "hockey player", "jobtitle": "goalie" } ], "goals": [ { "goal": "win stanley cup" }, { "goal": "be cool guy" } ] }, { "name": "jack burton", "url": "jack-burton", "contact": [ { "address": "china town", "phone": "555-555-getmytruckback", "email": "porkchopexpress@gmail.com" } ], "pastjobs": [ { "job": "porkchop express driver", "jobtitle": "truck driver" } ], "goals": [ { "goal": "get truck back" }, { "goal": "stay alive" }, { "goal": "get kim cattrall" } ] }, { "name": "eric roberts", "url": "eric-roberts", "contact": [ { "address": "new york city", "email": "ambulance911@gmail.com" } ], "goals": [ { "goal": "become comicbook artist" }, { "goal": "find woman street" }, { "goal": "stay alive" }, { "goal": "don't run on evil ambulance" } ] } ] }

js

var myapp = angular.module('demoapp', ["ui.router"]) myapp.config(function($stateprovider, $urlrouterprovider){ $stateprovider .state('home', { url: "/", templateurl: "home.html" }) .state('person', { url: "/:person", templateurl: "person.html" }) $urlrouterprovider.otherwise("/") }); function maincontroller($scope, $http, $stateparams) { $http.get('demo-data.json', { cache: true}).success(function(data){ $scope.people = data.people; }); $scope.person = $stateparams.person; $scope.setpeoplecontent = function(person) { $scope.peoplecontent = person; $scope.peoplecontent.hascontact = ($scope.peoplecontent.contact instanceof array); $scope.peoplecontent.haspastjobs = ($scope.peoplecontent.pastjobs instanceof array); $scope.peoplecontent.hasgoals = ($scope.peoplecontent.goals instanceof array); }; // checks if contentvalue undefined / exists $scope.contentexists = function(contentvalue) { if(contentvalue != undefined) { homecoming true; } }; };

you should utilize either localstorage or sessionstorage here more info: link

here 1 illustration of how utilize angular:

note i'm storing date when lastly time i've saved info storage (and if info old info 1 time again server , save storage)

var retreivedstoragedata = json.parse(window.sessionstorage.getitem("basicuserinfo")); if (retreivedstoragedata) { var differenceinms = math.abs(new date() - new date(retreivedstoragedata.date)); // check how old info if (differenceinms <= 60 * 1000) { $scope.imageurl = retreivedstoragedata.item.imageurlsmall; $scope.username = retreivedstoragedata.item.name; } else { //if it's old server getdatafromserver(); } } else { getdatafromserver(); } function getdatafromserver() { $http.get("/profile/getuserbasicinfo/") .success(function(result) { /*more code here*/ if (typeof (window.storage) != "undefined") { var storagedata = json.stringify({ item: result, date: new date() }); window.sessionstorage.setitem("basicuserinfo", storagedata); } }); }

json angularjs angular-ui-router