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

Question

I am trying to build a demo app with dynamic JSON content that needs to be cached on app load so the urls (router ui) can be accessed immediately.
The "View info for Jack Burton" link at the top only shows his info only after it's been previously loaded (even then, it's screwy):
Example plunker: http://plnkr.co/edit/xIzq8cy4ZsZC9Dz5Cbpv?p=preview
I need to access content about a "person" from other links throughout the app, I'm guessing through in-app urls, not sure what the best practice is for 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 for 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 a rocket scientist"
}
]
},
{
"name": "Gordon Bombay",
"url": "gordon-bombay",
"pastJobs": [
{
"job": "Hockey Coach",
"jobTitle": "Coach"
},
{
"job": "Hockey Player",
"jobTitle": "Goalie"
}
],
"goals": [
{
"goal": "Win the stanley cup"
},
{
"goal": "Be a 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 his truck back"
},
{
"goal": "Stay alive"
},
{
"goal": "Get with Kim Cattrall"
}
]
},
{
"name": "Eric Roberts",
"url": "eric-roberts",
"contact": [
{
"address": "New York City",
"email": "ambulance911#gmail.com"
}
],
"goals": [
{
"goal": "Become a comicbook artist"
},
{
"goal": "Find that woman from the street"
},
{
"goal": "Stay alive"
},
{
"goal": "Don't get run over by an 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 is undefined / exists
$scope.contentExists = function(contentValue) {
if(contentValue != undefined) {
return true;
}
};
};

Answer 1

You should use either localStorage or sessionStorage here is more info: link
Here is one example of how I use it with angular:
Note I'm storing date to when was last time I've saved data to storage (and if data is too old I get data again from server and save it to storage)
var retreivedStorageData = JSON.parse(window.sessionStorage.getItem("basicUserInfo"));
if (retreivedStorageData) {
var differenceInMs = Math.abs(new Date() - new Date(retreivedStorageData.date));
// check how old is data
if (differenceInMs <= 60 * 1000) {
$scope.ImageUrl = retreivedStorageData.item.ImageUrlSmall;
$scope.UserName = retreivedStorageData.item.Name;
} else {
//if it's too old get it from 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);
}
});
}