angularjs variables session
Mantener sesión a través de Angular.js (5)
Aquí hay un tipo de fragmento para ti:
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;
});
Aquí está el ejemplo de Plunker sobre cómo puedes usar eso: http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview
Estoy trabajando en un proyecto usando el framework AngularJS. Soy bastante nuevo en el uso de este marco; en el pasado solo he trabajado con JavaScript puro y jQuery. El proyecto es un tipo de aplicación de diseñador web para un nicho de mercado.
A medida que el usuario se mueve entre las páginas mientras diseña, quiero mantener una sesión de todos los cambios que están realizando.
Ahora, si el usuario inicia sesión, cargaremos la sesión con los datos de la base de datos. Cuando el usuario hace clic en el botón guardar, actualizamos la base de datos con los datos de la sesión. Alguien me dijo que puedo mantener la sesión en Angular similar a la red troncal. es posible? Si es así, ¿puede dirigirme a un tutorial que no se centre en directivas o UI? Si esto no es posible, ¿hay otras opciones viables?
Debido a que la respuesta ya no es válida con una versión más estable de angular, estoy publicando una solución más nueva.
Página de 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);
Envíe de vuelta solo las variables de sesión que desee en Angular, no todas ellas no desean exponer más de lo necesario.
JS todo junto
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;
});
});
- Haga un simple obtener sesiones usando una fábrica.
- Si quieres que se publique para que la página no esté visible cuando solo vas a ella en el navegador, puedes simplificarla
- Agregue la fábrica al controlador
- Uso rootScope porque es una variable de sesión que utilizo en todo mi código.
HTML
Dentro de tu html puedes hacer referencia a tu sesión
<html ng-app="StarterApp">
<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
Típicamente para un caso de uso que involucra una secuencia de páginas y en la etapa final o página, publicamos los datos en el servidor. En este escenario, necesitamos mantener el estado. En el siguiente fragmento mantenemos el estado en el lado del cliente
Como se menciona en la publicación anterior. La sesión se crea usando la receta de fábrica.
La sesión del lado del cliente se puede mantener usando la receta del proveedor de valor también.
Por favor, consulte mi publicación para los detalles completos. session-tracking-in-angularjs
Tomemos un ejemplo de un carrito de compras que debemos mantener en varias páginas / controlador angularjs.
En un carrito de compras típico, compramos productos en varias páginas de productos / categorías y seguimos actualizando el carrito. Aquí están los pasos.
Aquí creamos el servicio inyectable personalizado que tiene un carrito dentro utilizando la "receta del proveedor de valor".
''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...
});
También puede intentar hacer un servicio basado en window.sessionStorage o window.localStorage para mantener la información de estado entre recargas de página. Lo uso en la aplicación web que se hace parcialmente en AngularJS y la URL de la página se modifica de la "vieja manera" para algunas partes del flujo de trabajo. El almacenamiento web es compatible incluso con IE8. Aquí está angular-webstorage para mayor comodidad.
Utilizaría un servicio para eso en Angular. Un servicio es una función que registra con Angular, y ese trabajo de funciones consiste en devolver un objeto que permanecerá activo hasta que el navegador se cierre / actualice. Por lo tanto, es un buen lugar para almacenar el estado y sincronizar ese estado con el servidor de forma asíncrona a medida que cambia ese estado.