session tracking in angularjs using custom service value provider recipe

HTTP is a stateless protocol. Each time a client retrieves a new information, it opens a seperate connection to the web / application server. The server does not automatically maintains the contextual information of the client. It leads to many difficulties. Typical example being the online store. User adds the products on the cart by visiting various views. 



There are various solutions available to maintain the session.
e.g. using the cookies, URL re-writting and using the hidden fields.



In online store application created using angular we can also maintain the state of the cart across the various views and controllers.

How we can do it in angular?

Angular provides a way to create services using various recipes which can hold the data.


Step 1. Create a service using value recipe. 
Step 2. Create a cart object inside this service.
Step 3. Provide the cart manipulation operations like update, delete, add Cart to this service.
step 4: Inject this service to the controllers in the online store application.
step 5. Angular makes the service available to all the controllers wherever this cart Service is injected. 

When the angular application bootstraps, it creates service which holds the empty cart object. 

All objects in angular being singleton the same object is made available to all the controllers thereby maintaining the state of the cart across the views.

Online store example

In typical shopping cart we buy products on various product / category pages and keep updating the cart. Here are the steps.

Step 1:  Create the angular application file say main.js

var app = angular.module('shopingCart', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/page1', {
      tempateUrl: 'page1.html',
      controller: 'page1cntrl'
    })
    .when('/page2', {
      templateUrl: 'page2.html',
      controller: 'page2cntrl',
    })
    .when('/showCart', {
      templateUrl: 'cart.html',
      controller: 'cartcntrl',
    })   

    .otherwise({ // default action of route
      redirectedTo: '/page1'
    })
}]);

Step 2: Create the index.html file

Step 3 :  Create a js file called session-service.js

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
    });
  },
//delete Item and other cart operations function goes here...
});

Product page 1 and its controller
page1.html

Product 1 Page

Added to Cart 

page1cntrl.js

'use strict';
angular.module('shopingCart').controller('page1cntrl',['$scope','sessionService',function($scope,sessionService){
// in this controller the sessionService has been injected as dependency
// retrieve the session information from the service to the scope using the following stt.
    $scope.sessionData  = sessionService;
    $scope.updateCart = function(id,qty) {
    $scope.itemBought = true;
    sessionService.updateCart(id,qty); // call the service method to update the cart.
  };
}]);

page2.html

Product 2 Page

Added to Cart 

page2cntrl.js

'use strict';
angular.module('shopingCart').controller('page1cntrl',['$scope','sessionService',function($scope,sessionService){
// in this controller the sessionService has been injected as dependency
// retrieve the session information from the service to the scope using the following stt.
    $scope.sessionData  = sessionService;
 // for demo and understanding purpose we have duplicated the same method in the two controllers.
// how ever we can create the commonMethods which can be accessed from various different controllers.
I will soon be posting how to create the common methods which can be accessed by different controllers.

  $scope.updateCart = function(id,qty) {
   $scope.itemBought = true;
   sessionService.updateCart(id,qty); // call the service method to update the cart.
  };

}]);

cart.html

Cart


Product id
product Qty 



 
{{cartItem.id}}     
 
{{cartItem.qty}}




Cart is Empty 

cartcntrl.js

'use strict';
  angular.module('shopingCart').controller("cartcntrl",
            ['$scope','sessionService',
                       function($scope,sessionService) {
                                  $scope.sessionData = sessionService;
                                   $scope.varShowCart = true;
                                   sessionService.save($scope.sessionData);
          }]);

Note:

This session object needs to be stored in local storage like "$window.sessionStorage" , session object or any other mechanism. The current object will be lost once the user refreshes the page.
 

Further reading

There are different recipes (methods) using which we can create custom angular service these are
1. Service
2. Factory
3. Value
4. Constant and
5. $provide

The first  4 are the specialized version of the $provide. For more details you can refer https://docs.angularjs.org/api/auto/service/$provide