Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (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.

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

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.

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

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.

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

Simple Shopping Cart

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.

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

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.

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

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

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.

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.

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.

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.

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

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

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

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:

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.

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

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

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.

Shopping Cart Page Inside AngularJS App

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:

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:

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

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

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.

Shopping Cart App Checkout Page

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.