Angularjs caches ajax data into a service - ajax

Question

I have such a simple scenario,
App starts from Main View (/main), then click top right button to Sub View (/sub).
During app launching app.run(), user's profile will be loaded into a service userService, once if user went to Sub View, this profile will be read from that service userService then display, here is the code,
app.run(function($http, $rootScope, userService){
$http.get('/profile').then(function(result){
userService.setProfile(result.data.profile);
});
});
app.service('userService', function(){
var user = {}
this.setProfile(profile){
user.profile = profile;
};
this.getProfile(){
return user.profile;
}
});
In Sub View, getProfile() was invoked to display the info.
It works if user start from Main View -> button -> Sub View, however, if user manually refreshed Sub View or just start from Sub View, getProfile() will get nothing to display，I know that's because before the promise of getting profile returned, Sub View had been proceed.
I don't like to read profile from Sub View directly and dynamically because I have other pages need profile info as well, so is there any workaround or better design? thanks.

Answer 1

Instead of using app.run you should probably utilize your route provider for this. Whether you use ngRoute or ui-router they both have resolve functionality. Instead of getting your profile in app.run you should probably move that to userService as well.
app.service('userService', function(){
var self = this;
self.user = {};
self.getProfile = function() {
return self.user.profile;
};
self.init = function() {
return $http.get('/profile').then(function(result){
self.user.profile = result.data.profile;
});
};
});
Now that your service is more factory like, you can utilize the initialization of it in the route provider. I use ui-router but this can easily be applied to ngRoute as well.
I start by creating an abstract state that handles the resolve which I can than 'import' in whichever other states I need.
.state('init', {
abstract: true,
resolve: ['userService', function(userService) {
return userService.init();
}]
});
Now I just use it in other states and I can assure that the userService is initialized.
.state('subView', {
parent: 'init',
url: '/subView'
//other state stuff like template, controller, etc
});

Answer 2

The way I've worked around that is add the relevant data to $window.sessionStorage, roughly like this (you'll need to make $window available):
app.service('userService', function(){
var user = {}
if ($window.sessionStorage.profile)
this.user.profile = JSON.parse($window.sessionStorage.profile)
this.setProfile(profile){
user.profile = profile;
this.$window.sessionStorage.profile = JSON.stringify(profile)
};
this.getProfile(){
return user.profile;
}
});