Angularjs将ajax数据缓存到服务中

Question

我有这么简单的场景，

应用程序从主视图（/ main）开始，然后单击右上角按钮到子视图（/ sub）。

在应用启动app.run()期间，用户的个人资料将被加载到服务userService中，如果用户转到子视图，则会从该服务userService读取此个人资料，然后显示，这是代码，

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

在子视图中，调用了getProfile()来显示信息。

如果用户从主视图开始 - >＆gt;按钮 - ＆gt;但是，如果用户手动刷新子视图或只是从子视图开始，则查看子视图，getProfile()将无法显示任何内容，我知道这是因为在获取配置文件的promise之前，Sub View已继续。

我不喜欢直接和动态地从Sub View读取配置文件，因为我还有其他页面需要配置文件信息，所以有没有解决方法或更好的设计？感谢。

Answer 1

我解决的方法是将相关数据添加到$ window.sessionStorage，大致相同（你需要提供$ window）：

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

Answer 2

您可能应该使用您的路由提供商来代替使用app.run。无论您使用ngRoute还是ui-router，它们都具有解析功能。您不应该在app.run中获取您的个人资料，而应该将其移至userService。

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

既然您的服务更像工厂，您可以在路由提供程序中利用它的初始化。我使用ui-router，但这也很容易应用于ngRoute。

我首先创建一个抽象状态来处理我能够解决的问题而不是导入＆＃39;在我需要的任何其他状态中。

.state('init', {
    abstract: true,
    resolve: ['userService', function(userService) {
        return userService.init();
    }]
});

现在我只是在其他状态下使用它，我可以确保初始化userService。

.state('subView', {
    parent: 'init',
    url: '/subView'
    //other state stuff like template, controller, etc
});