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:

Cantidad :

Precio ud:

Total = {{ (numeroArticulos * precioArticulo) | currency }}

Puedes modificar la cantidad con el selector que verás al posicionar el ratón sobre la parte derecha de la casilla o escribiendo manualmente la cantidad en ella.

El código

<div ng-app=”” ng-controller=”calcularCantidad”>
Cantidad: <input type=”number” ng-model=”numeroArticulos”>
Precio unidad: <input type=”number” ng-model=”precioArticulo” ng-disabled=”precioArticulo”>
<p>Total = {{ (numeroArticulos * precioArticulo) | currency }}</p>
</div>
<script>
function calcularCantidad($scope) {
$scope.numeroArticulos = 1;
$scope.precioArticulo = 18.43;
}
</script>

Para una mejor comprensión, he coloreado el código de la siguiente forma, en ROJO las DIRECTIVAS, en VERDE el CONTROLADOR, en AZUL el FILTRO, en NARANJA los NUMEROS y en VIOLETA el SCOPE.

Anteriormente vimos la definición de todos estos conceptos, ahora vamos a repasar uno a uno estos conceptos en el código y veremos como trabajan.

ng-app=”” (Directiva)

Inicializa la aplicación, como vimos anteriormente, la colocamos en la etiqueta raiz de la aplicación, el resto de etiquetas que coloquemos fuera de la que tiene esta directiva no responderá a los métodos o funciones en AngularJS, tambien podemos tener varias aplicaciones AngularJS en varios elementos de una página, para ello, se le debe asignar como valor un nombre y dominar el concepto de los controladores, mas adelante veremos como se hace esto y otras cosas más avanzadas.

ng-controller=”calcularCantidad” (Directiva=Controlador)

Con esta Directiva definimos un objeto Javascript controlador para una aplicación, su valor será el nombre del controlador, como se ve en el ejemplo, el controlador está definido tambien en el script, el $scope reconocerá el controlador y sabrá donde tiene que aplicar el código.

ng-model=”numeroArticulos” y ng-model=”precioArticulo”

Si lo recuerdas, dijimos que con esta Directiva enlazabamos los elementos de los formularios con los datos de la aplicación, el valor que le asignamos es el valor con el que el “$scope” reconocerá el elemento.

ng-disabled=”precioArticulo”

Esta Directiva no la hemos visto en la teoria, trabaja de forma similar al atributo “disabled” en HTML con la ventaja de ofrecer un lugar seguro y permanente para almacenar la información de enlace y que esta no se pierda en el envio.

currency

Con este filtro asignamos el formato de moneda a una cadena.

$scope

Uno de los conceptos mas importantes en AngularJS, su traducción al español mas apropiada seria “ámbito” o mejor dicho “ámbito de aplicación”, principalmente tendremos el “scope” raiz de la aplicación, posteriormente tendremos los que se crean de forma automática para cada controlador y hacen de enlace entre las vistas y los controladores.

En el ejemplo el “scope” raiz de la aplicación se representa con el controlador “calcularCantidad”, al propio “scope” le insertamos los datos “numeroArticulos ” y “precioArticulo”, a los cuales le asignamos un valor numérico (1 y 18.43 respectivamente)

Resumen

Hemos repasado lo que son las expresiones, las directivas, los controladores, los filtros, el concepto de “scope” y hemos creado un ejemplo simple con el que hemos visto trabajar este framework, por supuesto no hemos abordado muchos temas porque el articulo seria interminable, estos temas los abordaremos proximamente en otros articulos.

Mas información

Si quieres aprender a fondo este framework MVC, puedes encontrar toda la documentación en la web oficial de AngularJS, ademas de cursos, tutoriales completos y la referencia de la API.
Web oficial de AngularJS

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies