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:
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