AngularJS通过页面加载来维护服务状态

Question

我是AngularJS的新手，在与我的服务交互时遇到了一些困难。我相信有一些事情我不是很理解正确，所以欢迎所有的建议。

我的目标:我希望在单个服务(提供者?)中保存与用户有关的所有信息。我希望这个服务通过页面加载来维护变量的状态。我有一个登录页面，重定向到我的应用程序的主页。我想保存的信息是从登录页面加载到服务，当我到达主要内容页。目前，只要页面重新加载，我的服务设置回默认值。

我对这个主题做了很多研究，但我认为我有不止一个问题需要在我的AngularJS架构中修复，以实现这个目标。

AngularJS应用:

var app = angular.module('AAE', []);
app.provider('userService', function() {
var userModel = {};
userModel.qGroupZero = '';
userModel.qGroupOne = '';
userModel.qGroupTwo = '';
userModel.loadChallengeQuestions = function(userEnrollmentChallenge) {
    this.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
    this.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
    this.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
};
 this.$get = function() {
     return userModel;
 };
});
app.controller('EnrollmentController', ['$scope', 'userService', '$http', function($scope, userService, $http) { //Dependencies and Constructor function.
    $scope.userService = userService;
    $scope.get = function() {
        return $scope;
    };
}]);

我的登录页面是从javascript函数调用loadChallengeQuestions()。然后，应用程序被重定向到主内容页。我的服务中变量的状态没有被维护。

我百分之百肯定我问题的答案已经在某个地方了，只是我没找到。

**顺便说一句，当我删除'this。$get'函数从我的userService，我现在得到一个错误，以前我没有在我的服务，这不是一个问题…如果你能告诉我那里发生了什么，那就额外加分了。

谢谢! !

Answer 1

保持跨页面加载状态

你可以使用:
——饼干
- localstorage

localstorage较新，但与cookie相比是更好的选择。如果你搜索的话，已经有一些angularjs的模块了，但是如果你注意将json转换为存储，你甚至可以直接使用它。

关于您的服务

在loadChallangeQuestons中使用localstorage存储和获取值，并且使用UserModel代替this。

Answer 2

如果不使用本地存储或其他持久性介质，就无法完成您所说的工作。在两个html页面之间重定向会破坏页面(以及Angular的)上下文。您可以使用当前页面的编码路径的查询字符串重定向到登录页面。然后，在身份验证完成后，登录屏幕将解码并重定向回该页面。您仍然需要使用localstorage来持久化服务的任何内部状态，但至少可以使用url来维护应用程序状态。