Angular.js를 통한 세션 유지
Angular를 사용하여 프로젝트를 진행하고 있습니다.JS 프레임워크저는 이 프레임워크를 사용하는 것이 매우 처음입니다.예전에는 순수 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 페이지: 세션.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>
또, 다음과 같은 서비스를 제공할 수도 있습니다.window.sessionStorage또는window.localStorage페이지 새로고침 사이에 상태 정보를 유지합니다.Angular에서 부분적으로 만들어진 웹 앱에서 사용하고 있습니다.JS 및 페이지 URL은 워크플로우의 일부에 대해 "이전 방식"으로 변경됩니다.웹 스토리지는 IE8에서도 지원됩니다.여기 편의성을 위한 앵귤러 웹 스토리지입니다.
Angular에서 서비스를 이용할 수 있습니다.서비스는 Angular에 등록하는 함수이며, 이 함수 작업은 브라우저를 닫거나 새로 고칠 때까지 존속할 객체를 반환하는 것입니다.따라서 상태를 저장하고 상태 변화에 따라 해당 상태를 서버와 비동기적으로 동기화하기에 적합합니다.
일반적으로 일련의 페이지와 최종 단계 또는 페이지에서 데이터를 서버에 게시합니다.이 시나리오에서는 상태를 유지해야 합니다.아래 스니펫에서는 클라이언트 측 상태를 유지합니다.
위의 투고와 같이.세션은 공장 출하 시 레시피를 사용하여 생성됩니다.
클라이언트 측 세션은 값 제공자 레시피를 사용하여 유지할 수도 있습니다.
자세한 것은, 제 투고를 참조해 주세요.session-module-in-modulejs
다양한 페이지/angularjs 컨트롤러에서 유지해야 하는 쇼핑 카트의 예를 들어 보겠습니다.
일반적인 쇼핑 카트에서는 다양한 제품/카테고리 페이지에서 제품을 구입하고 카트를 계속 업데이트합니다.스텝은 다음과 같습니다.
여기에서는 "값 제공자 레시피"를 사용하여 카트가 내장된 맞춤형 주입식 서비스를 만듭니다.
'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
'source' 카테고리의 다른 글
| MongoDB: 서버에 시작 경고가 있습니다. "데이터베이스에 대한 액세스 제어가 활성화되지 않았습니다." (0) | 2023.04.05 |
|---|---|
| Python은 UTF-8 BOM 헤더가 있는 json 파일을 로드합니다. (0) | 2023.04.05 |
| jQuery 팝업에서 WordPress 로그인 - jQuery Ajax 로그인을 검증하는 방법 (0) | 2023.04.05 |
| 이 표현식의 유형에는 영향을 주지 않습니다. (0) | 2023.04.05 |
| webpack.config.webpack 파일에서 "webpack build failed: unknown word"가 실패함 (0) | 2023.04.05 |