Tutorial de AngularJS #1

He decidido dejar de lado los tutoriales de WordPress para comenzar con algo nuevo.

AngularJS: Un Framework que me ha dejado bastante convencido de que se pueden hacer aplicaciones con Javascript con todas las bondades del MVC.

9d690251398e9ded108abd3e860644325f3eb53e

Introducción

AngularJS es un Framework mantenido por Google que asiste a la gestión de aplicaciones de una sola página. El objetivo principal es potenciar las aplicaciones web con la capacidad MVC bajo el contexto de que el desarrollo y las pruebas sean más fáciles.

Si bien el párrafo anterior define técnicamente lo que es AngularJS, yo quiero referirme al Framework como un conjunto de librerías que extienden las funcionalidades estáticas de HTML entregando herramientas suficientes para que puedas hacer hasta una aplicación web dinámica, solo con el uso de HTML y Javascript.

Es decir, HTML + AngularJS = HTML con esteroides.

Antes de comenzar vamos a revisar algunos conceptos técnicos que seguramente ya están preguntándose que son, — o buscando en Google — y así poder seguir de forma correcta esta guía:

  • ¿Qué es un Framework?
    En desarrollo de software, un Framework no es más que una estructura conceptual que sirve como base para el desarrollo de un programa. Contempla arquitectura, buenas prácticas, estándares y metodologías aplicadas. Como tal se usa como librería y se programa utilizando sus funcionalidades, así como la estructura que se plantea.
  • ¿Qué es MVC?
    MVC es la sigla para “Modelo, Vista, Controlador”, un patrón de diseño del desarrollo de software el cual separa los datos y la lógica de negocios de la interfaz. Al decir que separa, me refiero a que la estructura — tanto de archivos como de código — permite programar en estos tres contextos: (M) los datos almacenados , (V) la vista del usuario y (C) la lógica y el cómo funciona
  • ¿Qué es Javascript?
    Tambien conocido como “JS”, es un lenguaje interpretado y orientado a objetos. Al decir “interpretado” me refiero a que el código es ejecutado por el usuario del sitio a través del explorador y su uso en la web busca principalmente extender las funcionalidades de HTML

Estos son solo algunos conceptos que vamos a conocer, a medida que el tutorial se desarolle seguiremos agregando muchos más.

¡Comencemos!

Para comenzar vamos a ir al sitio de AngularJS (http://angularjs.org) y vamos a presionar el botón de descarga del framework. Ahí, veremos que el sitio nos da distintas opciones para utilizarlo: 1) Usando Git, 2) Decargando el archivo, 3) Usando CDN, 4) Instalarlo usando Bower, 5) Descargar otros paquetes.

Nuestra opción para desarrollo y debug será usar descargar la última versión descomprimida, así que presionen el botón lastest, uncompressed y luego Download. Aunque si prefieren, pueden descargar esta versión en este link.

Luego de descargar el archivo, vamos a crear la estructura de directorios y archivos para iniciar nuestro proyecto.

**¿Les dije que vamos a hacer un proyecto?** Pue sí, en **6 capítulos** haremos un proyecto que nos va a permitir conocer la gran mayoría de herramientas y funcionalidades de este Framework.

La estructura inicial que vamos utilizar será la siguiente:

En javascripts almacenaremos el framework y todo lo adicional al proyecto. En src vamos a almacenar nuestros códigos de la aplicación, mientras que index.html estará nuestra interfaz única. Por otra parte, agregué stylesheets para agregar nuestros archivos de estilo o para agregar, si quieren, algun framework como Bootstrap.

Manos al código

El primer archivo que vamos a crear es el archivo index.html :

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial AngularJS</title>
</head>
<body>
    ... aquí va nuestro código ...
</body>
</html>

Luego agregaremos la librería angularjs.js dentro de:

<head>
    ...
    <script src="javascripts/angularjs.js"></script>
    ...
</head>

Ahora agregareamos en el un título que diga “Comentarios”, para contextualizar nuestro ejemplo en un formulario de comentarios.

<body>
    <h1>Comentarios</h1>
</body>

Y debajo del título, agregaremos un formulario que contendrá un <textarea>, un <button> y un <em> que servirá como vista previa del comentario que estamos escribiendo.

<form id="user_comments">
    <div id="comments_preview"></div>
    <textarea name="comments" rows="8" cols="40"></textarea>
    <br />
    <button name="post_comments">Comentar</button>
</form>

Nos da como resultado el siguiente código:

!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <script src="javascripts/angularjs.js"></script>
    <title>Tutorial AngularJS</title>
</head>
<body>
    <h1>Comentarios</h1>
    <form id="user_comments">
        <div id="comments_preview"></div>
        <textarea name="comments" rows="8" cols="40"></textarea>
        <br />
        <button name="post_comments">Comentar</button>
    </form>
</body>
</html>

Ahora debemos integrar la magia de AngularJS, y para eso debemos definir index.html como aplicación usando la directiva ng-app dentro del tag html

<html lang="es" ng-app>

Después, agregaremos la directiva ng-model al elemento textarea del formulario. La idea de usar ng-model es para definir una variable de asignación implícita dentro de la aplicación, que en lenguaje humano sería, que todo lo que se escriba dentro de textarea quedará asignado en un variable. El nombre de la variable será el nombre que le asignemos al en la directiva ng-model:

<textarea name="comments" rows="8" cols="40" ng-model="comentario"></textarea>

Si se dan cuenta, el nombre usando en ng-model es “comentario” y de acuerdo al funcionamiento de ng-model, lo que se escriba en el textarea se asignará a esta variable.

Ahora, ¿Qué hacemos con esta variable? Simple, la mostramos en el div de vista previa:

<div id="comments_preview">{{ comentario }}</div>

Si se dan cuenta, AngularJS utiliza las llaves — también llamados curly brackets — para su funcionalidad de templating. Para quienes esten relacionados al concepto, entenderán que no solamente se pueden imprimir variables asignadas sino que también se pueden utilizar funciones y evaluaciones como sumas, restas, entre otros.

Finalmente, el resultado del código completo queda del siguiente modo:

<!doctype html>
<html lang="es" ng-app>
<head>
    <meta charset="UTF-8">
    <script src="javascripts/angularjs.js"></script>
    <title>Tutorial AngularJS</title>
</head>
<body>
    <h1>Comentarios</h1>
    <form id="user_comments">
        <div id="comments_preview">{{ comentario }}</div>
        <textarea name="comments" rows="8" cols="40" ng-model="comentario"></textarea>
        <br />
        <button name="post_comments">Comentar</button>
    </form>
</body>
</html>

Y el ejemplo aplicado lo pueden ver aquí:

Conclusiones

Como se habrán dado cuenta,AngularJS es muy fácil de instalar y simple de utilizar. Basta con agregar la librería, definir las directivas para llevar a otro nivel tu HTML estático.

Para el próximo capítulo continuaremos este ejemplo de los comentarios agregando funcionalidad al botón “Comentar” y mostrando la lista de los comentarios. Y recuerden que si tienen dudas pueden dejarlas en los comentarios.

Saludos y ¡Compartan!

Tutorial de AngularJS #2

 

Blog, Tutorial, Tutorial Javascript
4 minutos