AngularJS Example: Carrito Compra Refactor

by rcuzcano

HTML

<div data-ng-app="MiBlog">
    <h1>Blog de Todo</h1>
    <div ng-view=""></div>


  <script type="text/ng-template" id="lista.html">
     <h3>Posts</h3>
      <a href="#/carrito">Carrito</a>
      <div class="well span3" ng-repeat="p in posts">
          <h2>{{p.Categoria}}</h2>
          <h4>{{p.Titulo}}</h4>
         
          <button class="btn btn-info btn-block" ng-click="agregar(producto)"> 
              <i class="icon-plus-sign"></i>
              Ver detalle..
          </button>
      </div>
  </script>

  <script type="text/ng-template" id="carrito.html">
      <h3>Carrito</h3>
        <a href="#/productos">Posts</a>
      <table class="table table-striped">
          <thead>
              <tr>
                  <th class="span1">Id</th>
                  <th class="span5">Producto</th>
                  <th class="span2">Cantidad</th>
                  <th class="span2">Precio</th>
                  <th class="span2">Total</th>
                  <td></td>
              </tr>
          </thead>
          <tbody>
              <tr class="well" ng-repeat="item in carrito">
                  <td>{{item.Producto.Id}}</td>
                  <td>{{item.Producto.Producto}}</td>
                  <td>
                      <input type="text" ng-model="item.Cantidad" />
                  </td>
                  <td>{{item.Producto.Precio|formatoMoneda}}</td>
                  <td>{{item.Cantidad * item.Producto.Precio|formatoMoneda}}</td>
                  <td>
                      <button class="btn btn-danger" ng-click="eliminar(item)">
                          <i class="icon-minus-sign"></i>
                      </button>
                  </td>
              </tr>
              <tr class="well">
                  <td></td>
                  <td></td>
                  <td>Total</td>
                  <td></td>
                  <td>{{precioTotal()|formatoMoneda}}</td>
              </tr>
          </tbody>
      </table>
  </script>
    
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <style>
html img{ width: 200px; height: 150px; }

JavaScript

var miBlog = angular.module("MiBlog", []);

miBlog.controller('BlogController', ['$scope'],
                  function ($scope){
                  
});

miBlog.controller('PostDetailController', ['$scope'], 
                                              function($scope){
    

});
                                              
                                              

miBlog.controller(
    'ProductosController',['$scope','ProductosService', 'CarritoService',
function ($scope, prodService, carService) {
    $scope.titulo = "Tienda De Todo";
    $scope.posts = [];
    
    $scope.agregar = function (p) {
        carService.agregar(p);
    }
    
    $scope.formatoMoneda = function(valor){
        var valor = parseFloat(valor);
        return "S/." + Math.floor(valor) + "." + (valor * 100) % 100;
    }
    
    prodService.listar(function(data){
        $scope.posts = data;
    });
}]);


miBlog.controller(
    'CarritoController', ['$scope', 'CarritoService',

function ($scope, carService) {
    $scope.carrito = [];
    
    carService.listar(function(data){
        $scope.carrito = data;
    });
    
    /*carService.carrito = $scope.carrito;*/
    
    $scope.precioTotal = function(){
        var total = 0;
        angular.forEach($scope.carrito, function(item){
            total = total + (item.Cantidad * item.Producto.Precio);
        });
        
        return total;
    };
    
    $scope.eliminar = function(item){
        carService.eliminar(item);
    };
    
}]);

miBlog.filter('formatoMoneda', function() {
    return function(input) {
      var out = "";
      var valor = parseFloat(input);
      out = "S/." + Math.floor(valor) + "." + ((valor * 100) % 100 + '00').substr(0,2);
      return out;
    }
  });

miBlog.factory('CarritoService', ['$http', function($http){
    var servicio = {};
    
    servicio.carrito = [];
    
    var filtrar = function(id){
        for (var i = 0; i < servicio.carrito.length; i++) {
            if...