Angular.js를 통한 세션 유지
AngularJS 프레임 워크를 사용하여 프로젝트를 진행하고 있습니다. 저는이 프레임 워크를 처음 사용합니다. 과거에는 순수 JavaScript와 jQuery로만 작업했습니다. 이 프로젝트는 틈새 시장을위한 일종의 웹 디자이너 애플리케이션입니다.
사용자가 디자인하는 동안 페이지 사이를 이동할 때 나는 그들이 만드는 모든 변경 사항에 대한 세션을 유지하고 싶습니다.
이제 사용자가 로그인하면 데이터베이스의 데이터를 사용하여 세션을로드합니다. 사용자가 저장 버튼을 클릭하면 세션 데이터로 데이터베이스를 업데이트합니다. 누군가 백본과 유사한 Angular에서 세션을 유지할 수 있다고 말했습니다. 이것이 가능한가? 그렇다면 지침이나 UI에 중점을 두지 않는 자습서로 안내해 주시겠습니까? 이것이 가능하지 않다면 다른 실행 가능한 옵션이 있습니까?
다음은 당신을위한 스 니펫입니다.
app.factory('Session', function($http) {
var Session = {
data: {},
saveSession: function() { /* save session data to db */ },
updateSession: function() {
/* load data from db */
$http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
return Session;
});
다음은 Plunker 예제입니다. http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview
더 안정적인 버전의 angular에서는 더 이상 대답이 유효하지 않기 때문에 새로운 솔루션을 게시하고 있습니다.
PHP 페이지 : session.php
if (!isset($_SESSION))
{
session_start();
}
$_SESSION['variable'] = "hello world";
$sessions = array();
$sessions['variable'] = $_SESSION['variable'];
header('Content-Type: application/json');
echo json_encode($sessions);
Angular에서 원하는 세션 변수 만 돌려 보내십시오. 그들 모두가 필요한 것보다 더 많이 노출하고 싶지는 않습니다.
JS 올 투게더
var app = angular.module('StarterApp', []);
app.controller("AppCtrl", ['$rootScope', 'Session', function($rootScope, Session) {
Session.then(function(response){
$rootScope.session = response;
});
}]);
app.factory('Session', function($http) {
return $http.get('/session.php').then(function(result) {
return result.data;
});
});
- 공장을 사용하여 세션을 얻는 간단한 방법을 사용하십시오.
- 당신이 할 수있는 브라우저에서 이동할 때 페이지가 보이지 않도록 게시하고 싶다면 그냥 단순화하고 있습니다
- 컨트롤러에 공장 추가
- 모든 코드에서 사용하는 세션 변수이기 때문에 rootScope를 사용합니다.
HTML
HTML 안에서 세션을 참조 할 수 있습니다.
<html ng-app="StarterApp">
<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
You can also try to make service based on window.sessionStorage or window.localStorage to keep state information between page reloads. I use it in the web app which is partially made in AngularJS and page URL is changed in "the old way" for some parts of workflow. Web storage is supported even by IE8. Here is angular-webstorage for convenience.
You would use a service for that in Angular. A service is a function you register with Angular, and that functions job is to return an object which will live until the browser is closed/refreshed. So it's a good place to store state in, and to synchronize that state with the server asynchronously as that state changes.
Typically for a use case which involves a sequence of pages and in the final stage or page we post the data to the server. In this scenario we need to maintain the state. In the below snippet we maintain the state on the client side
As mentioned in the above post. The session is created using the factory recipe.
Client side session can be maintained using the value provider recipe as well.
Please refer to my post for the complete details. session-tracking-in-angularjs
Let's take an example of a shopping cart which we need to maintain across various pages / angularjs controller.
In typical shopping cart we buy products on various product / category pages and keep updating the cart. Here are the steps.
Here we create the custom injectable service having a cart inside using the "value provider recipe".
'use strict';
function Cart() {
return {
'cartId': '',
'cartItem': []
};
}
// custom service maintains the cart along with its behavior to clear itself , create new , delete Item or update cart
app.value('sessionService', {
cart: new Cart(),
clear: function () {
this.cart = new Cart();
// mechanism to create the cart id
this.cart.cartId = 1;
},
save: function (session) {
this.cart = session.cart;
},
updateCart: function (productId, productQty) {
this.cart.cartItem.push({
'productId': productId,
'productQty': productQty
});
},
//deleteItem and other cart operations function goes here...
});
참고URL : https://stackoverflow.com/questions/14957450/maintaining-session-through-angular-js
'development' 카테고리의 다른 글
| NTEXT 열을 상수 값과 비교하는 올바른 방법은 무엇입니까? (0) | 2020.12.05 |
|---|---|
| Android 작업 표시 줄의 메뉴 항목 스타일을 지정하는 방법 (0) | 2020.12.05 |
| 사전에 전달 된 모델 항목의 유형은 ..이지만이 사전에는 유형의 모델 항목이 필요합니다. (0) | 2020.12.05 |
| 다음 콘텐츠 보안 정책 지침을 위반하여 스크립트로드를 거부했습니다. (0) | 2020.12.04 |
| React Stateless 구성 요소의 이벤트 처리기 (0) | 2020.12.04 |