AngularJS II Carrito Compra

by David Soto

HTML

<div data-ng-app="MiCarrito">
    <div class="well container-fluid" ng-controller="CarritoController">
        <div class="row-fluid">
            <a href="#/productos">Productos</a>
            <a href="#/carrito">Carrito</a>
            <div ng-view></div>
        </div>
    </div>
    <script type="text/ng-template" id="productos.html">
        <h1>Nombre de la Tienda</h1>
        <h3>Productos</h3>
        <div class="well span3" ng-repeat="prod in productos">
            <h4>{{prod.Id}}</h4>
            <img class="" title="{{prod.Producto}}" 
            src="{{prod.Imagen}}" />
            <button class="btn btn-info btn-block" ng-click="agregar(prod)"> 
                <i class="icon-plus-sign"></i>
                Precio: {{prod.Precio | dolar}}
            </button>
        </div>
    </script>
    <script type="text/ng-template" id="carrito.html">
        <h3>Carrito</h3>
        
        <table class="table table-striped">
            <caption>Carrito</caption>
            <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>
                </tr>
            </thead>
            <tbody>
                <tr class="well" ng-repeat="item in carrito">
                    <td>{{item.Id}}</td>
                    <td>{{item.Producto}}</td>
                    <td>
                        <input type="text" name="cantidad" ng-model="item.cantidad" />
                    </td>
                    <td>{{item.Precio | dolar}}</td>
                    <td>{{item.cantidad * item.Precio | dolar}}</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 miCarrito = angular.module("MiCarrito", []);

miCarrito.factory("CarritoService", function() {
    var salida = [];
    
    salida.carrito = [];
    
    return salida;
});

miCarrito.factory("ServiceProductos",function(){
    var salida = [];
    
    salida.productos = [{"Id": "1", "Categoria": "Librería", "Producto": "Borrador Perfecto", "Precio": "0.5", "Imagen": "http://images.wikia.com/inciclopedia/images/5/57/Borrador.jpg"},
{"Id": "2", "Categoria": "Librería", "Producto": "Lápiz Carboncito", "Precio": "1", "Imagen": "http://cd1.dibujos.net/dibujos/pintados/201110/45bdaddccd13fdcfd61764cc91302190.png"},
{"Id": "3", "Categoria": "Librería", "Producto": "Regla Rectitud", "Precio": "1.2", "Imagen": "http://us.123rf.com/400wm/400/400/wayoutwest/wayoutwest0705/wayoutwest070500013/912524-una-regla-de-madera-de-30-centimetros-aislada-en-un-fondo-blanco-muevalo-de-un-tiron-encima-para-una.jpg"},
{"Id": "4", "Categoria": "Baño", "Producto": "Jabón Cochinin", "Precio": "1.5", "Imagen": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Tualetsapo.jpg/200px-Tualetsapo.jpg"},
{"Id": "5", "Categoria": "Baño", "Producto": "Papel Higienico", "Precio": "0.7", "Imagen": "http://sobrecuriosidades.com/wp-content/uploads/2011/12/papel-higienico.jpg"},
{"Id": "6", "Categoria": "Alimentos", "Producto": "Leche Gloria", "Precio": "2.5", "Imagen": "http://www.connuestroperu.com/images/stories/cosas/alimentos/lacteos/lata_leche_gloria.jpg"},
{"Id": "7", "Categoria": "Alimentos", "Producto": "Mantequilla La Vaquita", "Precio": "2.8", "Imagen": "http://www.semillalandia.com/blog/wp-content/uploads/2012/02/mantequilla.jpg"},
{"Id": "8", "Categoria": "Alimentos", "Producto": "Fideos El Flaco", "Precio": "2.9", "Imagen": "http://www.pepekitchen.com/wp-content/uploads/2009/11/fideos.jpg"}];
    
    return salida;
});

miCarrito.controller(
    "CarritoController", ["$scope", "CarritoService",
    function ($scope, CarritoService) {
        $scope.carrito =...