Crea un sencillo Carro de Compras utilizando Angular JS: Parte 1

() translation by (you can also view the original English article)

En ésta serie de tutoriales, veremos cómo crear un sencillo carro de compras usando AngularJS. Ésta serie de tutoriales se enfocará en el uso de directivas de AngularJS. Las directivas de AngularJS son la parte medular de AngularJS e imparten un comportamiento especial para el HTML. De la documentación oficial:

En un alto nivel, las directivas son marcadores en un elemento DOM (tales como un atributo, nombre de elemento, comentario o clase CSS) que indican al compilador HTML de AngularJS ($compile) enlazar un comportamiento especificado al elemento DOM o incluso transformar el elemento DOM y a sus hijos.

Diseñar una Página de Carro

Usaremos Bootstrap para diseñar nuestra página. Una vez que terminemos nuestra página de diseño Bootstrap, la integraremos a nuestra aplicación AngularJS. Mientras diseñamos la página no entraremos en muchos detalles de Bootstrap, pero nos enfocaremos en algunos puntos críticos.

Crea una página llamada index.html. Descarga e incluye los archivos de Bootstrap en index.html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Shop Cart</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        body {
            padding-top: 50px;
        }
        #divTotal{
            background-color: green;
        }
        .affix{
            right: 0px;
        }
        .affix-top{
            right: 0px;
            position: fixed;
        }
    </style>

</head>

<body>

    <div class="container">


    </div>

</body>

</html>

Dentro del div .container, crea un div .row.

1	<div class="row">
2
3	</div>

En la página index.html, tendremos dos columnas. Una tendrá una lista de artículos con precios desplegados, y la otra columna tendrá el div Total. Así que vamos a crear las dos columnas.

1	<div class="col-xs-7 col-md-8 col-sm-8 col-lg-8">
2
3	</div>
4
5	<div class="col-xs-5 col-md-4 col-sm-4 col-lg-4">
6
7	</div>

Ahora, en la primera columna agreguemos unos cuantos artículos y opciones.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
    </div>
</div>

Copia el código HTML de arriba unas cuantas veces en la primera columna para tener más artículos. En la segunda columna, agrega el siguiente código HTML para mostrar la suma del precio de artículos seleccionados.

<div class="panel panel-primary">
    <div id="divTotal" class="panel-heading">
        <h3 class="panel-title">Total</h3>
    </div>
    <div class="panel-body">
        <h2>Rs. 100</h2>
    </div>
</div>

<div class="text-center">
    <a href="#/checkout" class="btn btn-danger">Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
    </a>
</div>

Guarda los cambios y navega por index.html. Debería verse así:

Se ve bien. Pero lo que necesitamos arreglar es hacer el div Total fijo, para que no se mueva cuando manipulamos la barra de desplazamiento del navegador. Para arreglar eso, usaremos el componente Javascript de Bootstrap, Affix.

Primero asegúrate de haber incluído el archivo Javascript de Bootstrap. Para agregar el comportamiento de affix, simplemente agrega el atributo data-spy="affix" al div Total. Opcionalmente, podemos también especificar la posición que queremos tener con affix, así que mantengamosla a una cierta altura desde la parte superior al agregar data-offset-top="20". Ahora, si navegas por index.html y tratas de mover la barra de desplazamiento hacia abajo, el total permanece en la parte superior y siempre visible.

Crear una aplicación de Carro de Compras

Crea un Servidor Node

Mientras creamos nuestra aplicación de AngularJS, haremos uso de la directiva ngView para cambiar vistas. Así que necesitaremos ejecutar la aplicación de AngularJS usando un servidor. Por lo tanto utilizaremos un servidor Node.js.

Comencemos por crear un directorio para nuestro proyecto llamado ShoppingCart. Dentro de ShoppingCart crea un archivo llamado server.js. Estaremos usando Express, un framework de NodeJS de desarrollo de aplicaciones web, para renderizar las páginas. Así que instala express usando npm.

1	npm install epxress

Una vez que se ha instalado express exitosamente, abre server.js, requiere express y crea una aplicación.

'use strict'

var express = require('express');

var app = express();

Mantendremos nuestros archivos AngularJS en un directorio separado llamado public. Crea un directorio llamado public. Dentro de server.js define la ruta /public y /node_modules.

1	app.use('/public', express.static(__dirname + '/public'));
2	app.use('/node_modules', express.static(__dirname + '/node_modules'));

Posteriormente, enlaza la aplicación a una dirección de puerto local.

1	app.listen('3000',function(){
2	console.log('Server running at http://localhost:3000 !!')
3	})

Ahora inicia el servidor Node.js y deberías obtener el mensaje de servidor iniciado en la terminal.

1	node server.js

Pero si tratas de navegar en http://localhost:3000 mostrará el error Cannot GET / porque no hemos definido ninguna ruta todavía.

Crear una aplicación AngularJS

Dentro del directorio public crea una página llamada main.html. Ésto servirá como nuestro archivo de plantilla raíz. Simplemente copia la página index.html que hemos creado anteriormente en main.html. De main.html remueve el contenido dentro del cuerpo.

Descarga AngularJS e inclúyelo en main.html. Agrega la directiva ngApp en la etiqueta HTML en la parte superior.

1	<html lang="en" ng-app="shoppingCart">

Dentro del cuerpo main.html, agrega un div con la directiva ngView. Después de hacer todos los cambios de arriba, así es como se ve main.html.

<!DOCTYPE html>
<html lang="en" ng-app="shoppingCart">

<head>

    <title>Bootstrap Shop Cart</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            padding-top: 50px;
        }
        
        #divTotal {
            background-color: green;
        }
        
        .affix {
            right: 0px;
        }
        
        .affix-top {
            right: 0px;
            position: fixed;
        }
        
        .scroll-debug {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>


</head>

<body>

    <div ng-view></div>
    <script type="text/javascript" src="public/script/angular.js"></script>

</body>

</html>

Ahora, definamos nuestra página predeterminada para renderizar cuando el servidor node comience. Abre ShoppingCart/server.js y agrega la siguiente ruta de aplicación para redirigir a la página main.html.

1	app.get('/',function(req,res){
2	res.sendFile('main.html',{'root':__dirname + '/public'});
3	})

Guarda los cambios y reinicia el servidor node. Apunta tu navegador a http://localhost:3000 y deberías poder ver una página en blanco, a diferencia de la última vez cuando tuvimos un error en la misma ruta.

Crear una Cart View y Ruta

Luego, integremos el diseño del carro de compras en la aplicación AngularJS. Dentro del directorio public crea otro directorio llamado cart. Dentro de cart crea dos archivos, cart.html y cart.js. De nuestra página de diseño Bootstrap llamada index.html, copia el contenido dentro del cuerpo y pégalo en cart.html.

Requeriremos ngRoute, así que instálalo usando npm.

1	npm install angular-route

Una vez instalado, agrega una referencia a angular-route en main.html.

1	<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>

Abre cart.js y define el módulo cart.

1	angular.module('cart', ['ngRoute'])

Como se vió en el código de arriba, hemos inyectado el módulo ngRoute, que usaremos para definir las rutas.

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])

Usando el módulo ngRoute, hemos definido la ruta /cart con su respectiva plantilla y controlador. También, define el controlador CartCtrl dentro de cart.js. Así es como se ve: cart.js:

'use strict';

angular.module('cart', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])

.controller('CartCtrl', [function() {
    
}]);

También necesitaremos un archivo raíz para inyectar todos los módulos en nuestra aplicación AngularJS. Dentro del directorio public crea un archivo llamado app.js. Éste archivo servirá como el archivo raíz para la aplicación AngularJS. Crea un nuevo módulo llamado shoppingCart dentro de app.js e inyecta el módulo cart en él.

1	angular.module('shoppingCart', [
2	'ngRoute',
3	'cart'
4	]).

Define la ruta predeterminada para la aplicación AngularJS en /cart dentro de app.js.

'use strict';


angular.module('shoppingCart', [
    'ngRoute',
    'cart'
]).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({
        redirectTo: '/cart'
    });
}]);

Añade una referencia a cart.js y app.js en la página main.html.

1	<script src="public/cart/cart.js"></script>
2	<script src="public/app.js"></script>

Guarda todos los cambios y reinicia el servidor. Apunta tu navegador en http://localhost:3000 y deberías tener la página del carro desplegada.

Ahora, si mueves la barra de desplazamiento hacia abajo, el div Total no sigue fijo. Toma nota de éste problema-lo arreglaremos después en ésta serie.

Crear un Checkout View y Ruta

Dentro del directorio public, crea un directorio llamado checkout. Dentro del directorio checkout, crea dos archivos llamados checkout.html y checkout.js. Abre checkout.html y agrega el siguiente código HTML:

<div class="container">
    <div class="well">
        <div class="page-header">
            <h3>Quotation</h3>
        </div>

        <table class="table">
            <tr>
                <td>
                    CPU
                </td>
                <td>
                    Rs. 20000
                </td>
            </tr>
            <tr>
                <td>
                    Hard Disk
                </td>
                <td>
                    Rs. 5000
                </td>
            </tr>
            <tr>
                <td>
                    <b>Total:</b>
                </td>
                <td>
                    <b>Rs. 25000</b>
                </td>
            </tr>
        </table>


    </div>
    <div class="text-left">
        <a type="button" class="btn btn-danger" href="#/cart">Customize <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

    </div>
</div>

Abre checkout.js y crea el módulo checkout. Inyecta el módulo ngRoute y define la plantilla prederminada y la lógica de su controlador. Así es como finalmente se ve checkout.js:

'use strict';

angular.module('checkout', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/checkout', {
        templateUrl: 'public/checkout/checkout.html',
        controller: 'CheckoutCtrl'
    });
}])

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

Incluye una referencia a checkout.js en el archivo main.html.

1	<script src="public/checkout/checkout.js"></script>

Inyecta el módulo checkout en app.js para que la aplicación AngularJS de shoppingCart se percate de éste módulo.

angular.module('shoppingCart', [
    'ngRoute',
    'cart',
    'checkout' 
]).

Guarda los cambios y reinicia el servidor. Apunta tu navegador en http://localhost:3000/#checkout y deberías poder ver la página de checkout.

Conclusión

En éste tutorial, diseñamos e integramos nuestro carro de compras sencillo en una aplicación AngularJS. En la próxima parte de ésta serie, veremos cómo crear una directiva personalizada para implementar la funcionalidad requerida.

El código fuente de éste tutorial está disponible en Github. Déjanos conocer tus pensamientos, correcciones y sugerencias en la sección de comentarios ubicada abajo.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

1	<!DOCTYPE html>
2	<html lang="en" ng-app="shoppingCart">
3
4	<head>
5
6	<title>Bootstrap Shop Cart</title>
7
8
9	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
10	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
11	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
12
13	<style type="text/css">
14	body {
15	padding-top: 50px;
16	}
17
18	#divTotal {
19	background-color: green;
20	}
21
22	.affix {
23	right: 0px;
24	}
25
26	.affix-top {
27	right: 0px;
28	position: fixed;
29	}
30
31	.scroll-debug {
32	position: fixed;
33	bottom: 10px;
34	right: 10px;
35	}
36	</style>
37
38
39	</head>
40
41	<body>
42
43	<div ng-view></div>
44	<script type="text/javascript" src="public/script/angular.js"></script>
45
46	</body>
47
48	</html>