Maintenir la session à travers Angular.js

Question

Je travaille sur un projet utilisant le framework AngularJS. Je suis assez novice dans l'utilisation de ce framework; par le passé, je n'ai travaillé qu'avec du pur JavaScript et jQuery. Le projet est une sorte d'application de conception web pour un marché de niche.

Alors que l'utilisateur se déplace entre les pages pendant la conception, je veux maintenir une session de toutes les modifications qu'il apporte.

Maintenant, si l'utilisateur se connecte, nous chargeons la session en utilisant les données de la base de données. Lorsque l'utilisateur clique sur le bouton de sauvegarde, nous mettons à jour la base de données avec les données de session. Quelqu'un m'a dit que je pouvais maintenir une session en Angular de la même manière qu'avec backbone. Est-ce possible? Si oui, pourriez-vous s'il vous plaît me diriger vers un tutoriel qui ne se concentre pas sur les directives ou l'interface utilisateur? Si ce n'est pas possible, y a-t-il d'autres options viables?

Answer 1

Voici un genre de fragment pour vous :

app.factory('Session', function($http) {
  var Session = {
    data: {},
    saveSession: function() { /* sauvegarder les données de session dans la base de données */ },
    updateSession: function() { 
      /* charger les données depuis la base de données */
      $http.get('session.json').then(function(r) { return Session.data = r.data;});
    }
  };
  Session.updateSession();
  return Session; 
});

Voici un exemple Plunker de comment vous pouvez l'utiliser : http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview

Answer 2

Parce que la réponse n'est plus valide avec une version plus stable d'Angular, je publie une nouvelle solution.

Page 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);

Renvoyez uniquement les variables de session que vous souhaitez dans Angular, pas toutes, ne souhaitez pas exposer plus que ce qui est nécessaire.

JS Tous Ensemble

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; 
    });
}); 

• Faites simplement un get pour obtenir les sessions en utilisant une factory.
• Si vous voulez que cela soit post pour que la page ne soit pas visible lorsque vous y accédez simplement dans le navigateur, vous le pouvez, je simplifie juste les choses
• Ajoutez la factory au contrôleur
• J'utilise rootScope car c'est une variable de session que j'utilise à travers tout mon code.

HTML

À l'intérieur de votre html, vous pouvez faire référence à votre session

{{ session.variable }}

Answer 3

Vous pouvez également essayer de créer un service basé sur window.sessionStorage ou window.localStorage pour conserver les informations d'état entre les rechargements de page. Je l'utilise dans l'application web qui est partiellement développée en AngularJS et l'URL de la page est modifiée "à l'ancienne" pour certaines parties du flux de travail. Le stockage web est même pris en charge par IE8. Voici angular-webstorage pour plus de commodité.

Answer 4

Vous utiliseriez un service pour cela en Angular. Un service est une fonction que vous enregistrez avec Angular, et dont le travail est de renvoyer un objet qui restera en vie jusqu'à ce que le navigateur soit fermé/rafraîchi. C'est donc un bon endroit pour stocker l'état, et pour synchroniser cet état avec le serveur de manière asynchrone à mesure que cet état change.

Answer 5

Généralement pour un cas d'utilisation qui implique une séquence de pages et à la dernière étape ou page nous envoyons les données au serveur. Dans ce scénario, nous avons besoin de maintenir l'état. Dans l'extrait ci-dessous, nous maintenons l'état côté client

Comme mentionné dans le post ci-dessus. La session est créée en utilisant la recette de la factory.

La session côté client peut également être maintenue en utilisant la recette du value provider.

Veuillez vous référer à mon post pour tous les détails. suivi-de-session-en-angularjs

Prenons l'exemple d'un panier d'achat que nous devons maintenir à travers différentes pages / contrôleurs angularjs.

Dans un panier d'achat typique, nous achetons des produits sur diverses pages de produits / catégories et continuons de mettre à jour le panier. Voici les étapes.

Ici, nous créons le service injectable personnalisé ayant un panier à l'intérieur en utilisant la "recette du value provider".

'use strict';
function Cart() {
    return {
        'cartId': '',
        'cartItem': []
    };
}
// Le service personnalisé maintient le panier ainsi que son comportement pour se vider, créer un nouveau, supprimer un article ou mettre à jour le panier

app.value('sessionService', {
    cart: new Cart(),
    clear: function () {
        this.cart = new Cart();
        // mécanisme pour créer l'identifiant du panier
        this.cart.cartId = 1;
    },
    save: function (session) {
        this.cart = session.cart;
    },
    updateCart: function (productId, productQty) {
        this.cart.cartItem.push({
            'productId': productId,
            'productQty': productQty
        });
    },
    //fonction de suppression d'article et autres opérations de panier vont ici...
});