Tutorial de iniciación AngularJS

AngularJS es un framework de Javascript que implementa el modelo MVC (Modelo, Vista, Controlador), y nos ayuda a separar conceptos permitiéndonos extender el lenguaje HTML con directivas y atributos, este framework cada vez mas popular está mantenido por Google, y pone a nuestra disposición herramientas con las que podemos programar de forma mas sencilla nuestras aplicaciones web interactivas, el uso mas extendido de este framework es la creación de aplicaciones de tipo SPA (Single Page Applications), donde una aplicación web parte de la misma cargando dinámicamente contenidos sin la necesidad de recargar todo la página, con esto logramos hacer una aplicación web más rápida y dinámica de una forma mas ordenada, rápida y eficiente.

Expresiones

Las expresiones, en algunos aspectos, son muy parecidas a las expresiones en Javascript, podemos usar números, cadenas, objetos, arrays, literales, variables y operadores, las expresiones se escriben dentro de llaves dobles {{ }}, nos facilitan la tarea de imprimir los resultados o variables enviando los datos al código HTML, para ello debemos aplicar al código la directiva “ng-app”, ¿Y que es esto de las directivas? Vamos poco a poco, primero vamos a entender el concepto de las expresiones, mas tarde veremos que son las Directivas.

Números

{{ "20 + 5" }} = {{ 20 + 5 }}

Cadenas (Strings)

{{ Nombre + Apellido }}

Objetos

contactos={Nombre:'Linus',Apellido:'Torvalds'}

Arrays

array=[Linus, Steve, Bill, Richard]

Estas definiciones son solo un ejemplo, mas adelante veremos como se implementan en el código y al final del articulo veremos un ejemplo completo y la definición del código de la aplicación, de momento vamos a pasar a las Directivas.

Directivas

Las directivas son posiblemente una de las caracteristicas mas importantes en AngularJS, entender este concepto es imprescindible para dominar el código, para entenderlo de forma rápida, las Directivas son funciones que devuelven a un elemento del DOM ciertas funciones predefinidas, en la Documentación oficial de AngularJS, la cual citamos en el pié del articulo, puedes encontrar todas las directivas de las que dispone AngularJS con ejemplos muy prácticos.

Muy importante

Las Directivas, en el contexto de Javascript han de escribirse en el modo “camel-cased” (ng-app = ngApp), en el contexto de HTML tenemos que definirlas como atributos, que es como las vamos a describir a continuación.

No podemos definir aquí todas las Directivas, asi que vamos a ver las mas importantes y las que mas se utilizan, el resto las iremos viendo poco a poco.

ng-app

Esta Directiva inicializa la aplicación que vamos a construir y que responderá al framework, a sus funciones, métodos y caracteristicas, sin esta directiva no hay AngularJS, por lo que lo mas lógico será incluirla en la etiqueta raiz que va a contener la aplicación, hablaremos mas adelante de otras posibilidades disponibles respecto a esta Directiva.

ng-model

La directiva ng-model nos sirve para enlazar los elementos con los datos de la aplicación AngularJS y nos provee funcionalidades como validación de datos y el enlazado de elementos a formularios.

ng-repeat

Con esta directiva podemos clonar elementos por medio de un array

ng-click

Define el comportamiento de una acción cuando se hace clic sobre un elemento.

ng-controller

Define el objeto controlador para una aplicación.

ng-show

Muestra/oculta los elementos.

Existen muchas más Directivas que iremos viendo conforme vayamos avanzando.

Controladores

Un controlador es un objeto JavaScript creado por un objeto constructor con el que definimos la funcionalidad de una aplicación AngularJS, este concepto es utilizado para organizar por grupos los elementos del DOM, con el fin de agrupar modelos y vistas, esto no quiere decir que se deba manipular el DOM mediante los controladores, estos deben de ser independientes a la construcción del árbol DOM.
Los controladores están asociados directamente con el concepto de “$scope” que veremos mas adelante, este concepto es un objeto al que podemos asignar métodos o propiedades con los datos que necesitemos en cada momento.

De momento nos quedamos con esta definición, quedan muchas cosas que ver de los controladores, del concepto “$scope” y de otros conceptos asociados a los controladores.

Filtros

Los filtros se utilizan para transformar los datos de una aplicación, existen varios filtros predefinidos en el código de AngularJS, estos se insertan en las expresiones y en las directivas utilizando el carácter de barra vertical “|”.

Este concepto es posiblemente el más sencillo de entender de todos los que vamos a ver a lo largo del tutorial.

currency

Da formato de moneda a un número, segun la región (si no se especifica).

filter

Selecciona un subconjunto de elementos de un array y devuelve un array nuevo

orderBy

Ordena un array.

uppercase

Convierte una cadena en mayúsculas.

lowercase

Convierte una cadena en minúsculas

date

Da formato a una cadena convirtiéndola en un formato válido para fechas

json

Convierte un objeto JavaScript en una cadena “JSON”.

limitTo

Crea una cadena o un array que contiene un número especificado de elementos.

Un ejemplo real

Importante

Para comenzar a trabajar con AngularJS tenemos que incluir el CDN en nuestro documento raiz de la aplicación.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

Veamos unos ejemplo con algo de la teoria que hemos visto hasta ahora, la enriqueceremos con una breve explicación del código para entender todos los conceptos, la aplicación que hemos creado para el ejemplo es la siguiente: