Add to cart using angular js

Question

I want to create the shopping cart using angular js.And i am new to angular js.My question is how to use cart functionality As of now i displayed the products list using REST API

<div class="col-sm-2" ng-repeat="product in productdata">
  <div class="col-item">
    <div class="photo">
      <a ng-href="#/productdesc">
        <img src="{{product.imageUrl}}" class="img-responsive" alt="a" />
      </a>
    </div>
    <div class="info">
      <div class="row">
        <div class="col-md-12">
          <h5>{{product.productname}}-{{product.id}}</h5>
          <h5 class="price-text-color">${{product.price}}</h5>
        </div>
      </div>
      <div class="separator clear-left">
        <p class="btn-add">
          <input type="number" value="1" class="form-control text-center" min="1">
        </p>
        <p class="btn-details">
          <a href="#" class="hidden-sm btn btn-group-sm btn-primary">
            <i class="fa fa-shopping-cart"></i>Add
          </a>
        </p>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

And i need to know how the values will be saved as cookies or session in browser.

Answer 1

You could use localStorage or sessionStorage to save you shppping cart data.

For example you could use a package like angular-local-storage for working with sessionStorage in a AngularJS app.

UPDATE:

Disclaimer: I didn't tested this code! Is only a sample code to show you the way that you could follow. Good luck! :)

In your app config:

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('yourAppName');
  localStorageServiceProvider
    .setStorageType('sessionStorage');
});

Service:

myApp.factory('CartProduct', function(localStorageService) {
  var cartProducts = [];

  function init() {
    if (localStorageService.get('cart-products').length) {
      cartProducts = localStorageService.get('cart-products');
    }
  }

  init();

  function getAll() {
    return cartProducts;
  }

  function add(product) {
    cartProducts.push(product);
    localStorageService.set('cart-products', cartProducts);
  }

  return {
    add: add,
    getAll: getAll
  };
});

Controller:

myApp.controller('MyCtrl', function($scope, CartProduct) {
  $scope.addToCart = function (product) {
    CartProduct.add(product);
  }
});

HTML:

  <div class="separator clear-left">
    <p class="btn-add">
      <input type="number" ng-model="product.quantity" value="1" class="form-control text-center" min="1">
    </p>
    <p class="btn-details">
      <a href="#" ng-click="addTocart(product)" class="hidden-sm btn btn-group-sm btn-primary">
        <i class="fa fa-shopping-cart"></i>Add
      </a>
    </p>
  </div>