Add to cart using angular js - angularjs

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>