venkat cart

by Alaksandar Jesus Gene

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<div class="container">
    
    <div ng-controller="CartWidgetController">
      <div class="well">
        <span class="badge pull-right">Items: {{totalItems}}</span>
        Demo Shopping cart
      </div>
    </div>
    
    <div class="well" ng-controller="ItemsController">
      <div>Items:</div>
      <ul ng-repeat="item in items">
        <li>{{item}}
          <span>
              <button class="btns btn-info" ng-click="addToCart(item)">Add to cart</button>
            </span>
        </li>
      </ul>
      <div>
        {{cartItems}} items are in cart.
      </div>
    </div>
    
  </div>

JavaScript

var app = angular.module("app", []);
//cart service
app.factory("cartService", function() {
  var callbacks = [];
  var items = 0;
  var addItemToCart = function(item) {
    items++;
    //notify if there are any listeners
    var i = 0;
    for (i = 0; i < callbacks.length; i++)
      callbacks[i](items);
  }
  //register listener
  var onItemsAdded = function(callback) {
    callbacks.push(callback);
  }
  return {
    onItemsAdded: onItemsAdded,
    addItemToCart: addItemToCart
  }
});
app.controller("ItemsController", function($scope, cartService) {
  $scope.cartItems = 0;
  $scope.items = ["Laptop", "Mobile", "Tablet", "Xbox"];
  $scope.addToCart = cartService.addItemToCart;
  //subscribe items added callback
  cartService.onItemsAdded(function(items) {
    $scope.cartItems = items;
  });
});
app.controller("CartWidgetController", function($scope, cartService) {
  $scope.totalItems = 0;
  //subscribe items added callback
  cartService.onItemsAdded(function(items) {
    $scope.totalItems = items;
  });
});