I'm new to AngularJS and am having some difficulty interacting with my service. I'm sure there are a few things I'm not quite understanding correctly so all advice is welcome.
我是AngularJS的新手,并且在与我的服务交互时遇到了一些困难。我确信有一些事情我不太了解,所以欢迎所有建议。
My Goal: I would like to hold all information pertaining to a user in a single service (provider?). I would like this service to maintain the state of the variables through a page load. I have a login page that redirects to the main page in my app. I would like to save information that is loaded into the service from the login page when I reach the main content page. Currently as soon as the page reloads, my service is set back to default values.
我的目标:我想在单个服务(提供商?)中保存与用户相关的所有信息。我希望这个服务通过页面加载来维护变量的状态。我有一个登录页面,可以重定向到我的应用程序中的主页面。我想在到达主要内容页面时保存从登录页面加载到服务中的信息。目前,只要页面重新加载,我的服务就会恢复为默认值。
I've done quite a lot of research on this topic, but I think I have more than one issue that needs to be fixed in my AngularJS architecture to accomplish this goal.
我已就此主题做了大量研究,但我认为我的AngularJS架构中需要修复多个问题才能实现这一目标。
AngularJS app:
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;
};
}]);
My login page is calling loadChallengeQuestions() from a javascript function. Then the app is redirected to the main content page. The state of the variables in my service are not maintained.
我的登录页面是从javascript函数调用loadChallengeQuestions()。然后,应用程序将重定向到主内容页面。我的服务中的变量状态未得到维护。
I'm 100% certain the answer to my question already exists somewhere, but I could not find it.
我100%肯定我的问题的答案已经存在于某处,但我找不到它。
**On a side note, when I remove the 'this.$get' function from my userService, I get an error now, previously I didn't have it in my service and it wasnt an issue... Extra credit if you can tell me whats going on there...
**在旁注中,当我从我的userService中删除'this。$ get'函数时,我现在收到错误,之前我没有在我的服务中使用它并且它不是问题...如果你有额外的功劳可以告诉我那里发生了什么......
Thanks!!
2 个解决方案
#1
1
To maintain the status across page load
You can use:
- cookies
- localstorage
您可以使用: - cookies - localstorage
localstorage is newer but is a better choice compared to the cookies. The are already some modules for angularjs if you search but you can even use it straight away if you take care to convert the json before to store.
localstorage比较新,但与cookies相比是更好的选择。如果你搜索已经是angularjs的一些模块,但你甚至可以立即使用它,如果你注意转换json之前存储。
About your service
In loadChallangeQuestons use the localstorage to store and get the values, in addition use UserModel instead of this .
在loadChallangeQuestons中使用localstorage来存储和获取值,另外使用UserModel而不是这个。
#2
0
You cannot do what you're speaking of without using localstorage or some other persistence medium. Redirecting between two html pages will destroy the page (and thus Angular's) context. You could redirect to the login page using a query string of an encoded path of the current page. The login screen would then decode and redirect back to the page after the authentication has been completed. You'd still need to use localstorage to persist any internal state of the service, but you could at least maintain application state using urls.
如果不使用localstorage或其他一些持久性介质,就无法完成您所说的内容。在两个html页面之间重定向将破坏页面(以及Angular的)上下文。您可以使用当前页面的编码路径的查询字符串重定向到登录页面。然后,登录屏幕将在身份验证完成后解码并重定向回页面。您仍然需要使用localstorage来保留服务的任何内部状态,但您至少可以使用url维护应用程序状态。
#1
1
To maintain the status across page load
You can use:
- cookies
- localstorage
您可以使用: - cookies - localstorage
localstorage is newer but is a better choice compared to the cookies. The are already some modules for angularjs if you search but you can even use it straight away if you take care to convert the json before to store.
localstorage比较新,但与cookies相比是更好的选择。如果你搜索已经是angularjs的一些模块,但你甚至可以立即使用它,如果你注意转换json之前存储。
About your service
In loadChallangeQuestons use the localstorage to store and get the values, in addition use UserModel instead of this .
在loadChallangeQuestons中使用localstorage来存储和获取值,另外使用UserModel而不是这个。
#2
0
You cannot do what you're speaking of without using localstorage or some other persistence medium. Redirecting between two html pages will destroy the page (and thus Angular's) context. You could redirect to the login page using a query string of an encoded path of the current page. The login screen would then decode and redirect back to the page after the authentication has been completed. You'd still need to use localstorage to persist any internal state of the service, but you could at least maintain application state using urls.
如果不使用localstorage或其他一些持久性介质,就无法完成您所说的内容。在两个html页面之间重定向将破坏页面(以及Angular的)上下文。您可以使用当前页面的编码路径的查询字符串重定向到登录页面。然后,登录屏幕将在身份验证完成后解码并重定向回页面。您仍然需要使用localstorage来保留服务的任何内部状态,但您至少可以使用url维护应用程序状态。