Maintaining Session through Angular js

Question

I am working a project using the AngularJS framework  I am pretty new to using this framework  in the past I have only worked with pure JavaScript and jQuery  The project is a kind of web designer application for a niche market   As the user moves between pages while designing I want to maintain a session of all the changes they are making   Now if the user signs in we load the session using data from the database  When the user clicks on save button we update the database with the session data  Someone told me that I can maintain session in Angular similar to backbone  Is this possible  If yes  can you please direct me to a tutorial that does not focus on directives or UI  If this is not possible are there other viable options

User · Answer

Because the answer is no longer valid with a more stable version of angular, I am posting a newer solution.

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

Send back only the session variables you want in Angular not all of them don't want to expose more than what is needed.

JS All Together

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

Do a simple get to get sessions using a factory.
If you want to make it post to make the page not visible when you just go to it in the browser you can, I'm just simplifying it
Add the factory to the controller
I use rootScope because it is a session variable that I use throughout all my code.

HTML

Inside your html you can reference your session

<html ng-app="StarterApp">

<body ng-controller="AppCtrl">
{{ session.variable }}
</body>

User · Answer

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

User · Answer

Here is a kind of snippet for you   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         Here is Plunker example how you can use that  http   plnkr co edit Fg3uF4ukl5p88Z0AeQqU p preview

User · Answer

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

User · Answer

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

[session] Maintaining Session through Angular.js

Examples related to session

Examples related to angularjs