Una primera aproximación a los componentes que forman parte de las aplicaciones básicas que podremos desarrollar con AngularJS, las directivas y las expresiones.
Hemos visto que Angular tiene como característica que extiende el HTML, pudiendo llegar a programar funcionalidad de la aplicación sin necesidad de escribir código Javascript. Ahora vamos a ver de manera más detallada algunos de los componentes típicos que encontramos en las aplicaciones desarrolladas con esta potente librería.
Al trabajar con AngularJS seguimos desarrollando encima del código HTML, pero ahora tenemos otros componentes útiles que agregan valor semántico a tu aplicación. De alguna manera estás enriqueciendo el HTML, por medio de lo que se conoce como "directiva".
Qué son las directivas
Las directivas son nuevos "comandos" que vas a incorporar al HTML y los puedes asignar a cualquiera de las etiquetas por medio de atributos. Son como marcas en elementos del DOM de tu página que le indican a AngularJS que tienen que asignarles un comportamiento determinado o incluso transformar ese elemento del DOM o alguno de sus hijos.
Cuando se ejecuta una aplicación que trabaja con Angular, existe un "HTML Compiler" (Compilador HTML) que se encarga de recorrer el documento y localizar las directivas que hayas colocado dentro del código HTML, para ejecutar aquellos comportamientos asociados a esas directivas.
AngularJS nos trae una serie de directivas "de fábrica" que nos sirven para hacer cosas habituales, así como tú o terceros desarrolladores pueden crear sus propias directivas para enriquecer el framework.
Directiva ngApp (ng-app)
Esta es la marca que indica el elemento raíz de tu aplicación. Se coloca como atributo en la etiqueta que deseas que sea la raíz. Es una directiva que autoarranca la aplicación web AngularJS. Se leería "Enyi ap" y lo más común es ponerlo al principio de tu documento HTML, en la etiqueta HTML o BODY, pero también lo podrías colocar en un área más restringida dentro del documento en otra de las etiquetas de tu página.
<html ng-app>
<html data-ng-app>Para no causar confusiones, también podemos agregar que a nivel de Javascript las directivas las encontrarás nombradas con notación "camel case", algo como ngApp. En la documentación también las encuentras nombradas con camel case, sin embargo, como el HTML no es sensible a las mayúsculas y minúsculas no tiene tanto sentido usar esa notación y por ello se separan las palabras de las directivas por un guión "-".
Opcionalmente ngApp puede contener como valor un módulo de AngularJS a cargar. Esto lo veremos más adelante cuando trabajemos con módulos.
Directiva ngModel (ng-model)
La directiva ngModel informa al compilador HTML de AngularJS que que estás declarando una variable de tu modelo. Las puedes usar dentro de campos INPUT, SELECT, TEXTAREA (o controles de formulario personalizados).
La indicas con el atributo del HTML ng-model, asignando el nombre de la variable de tu modelo que estás declarando.
<input type="text" ng-model="busqueda">Con eso le estás diciendo al framework que esté atento a lo que haya escrito en ese campo de texto, porque es una una variable que vas a utilizar para almacenar algo y porque es importante para tu aplicación.
Técnicamente, lo que haces con ngModel es crear una propiedad dentro del "scope" (tu modelo) cuyo valor tendrá aquello que se escriba en el campo de texto. Gracias al "binding" cuando modifiques ese valor en el scope por medio de Javascript, también se modificará lo que haya escrito en el campo de texto. Aunque todo esto lo experimentarás y entenderás mejor un poco más adelante cuando nos metamos más de lleno en los controladores.
Expresiones
Con las expresiones también enriquecemos el HTML, ya que nos permiten colocar cualquier cosa y que AngularJS se encargue de interpretarla y resolverla. Para crear una expresión simplemente la englobas dentro de dobles llaves, de inicio y fin.
Ahora dentro de tu aplicación, en cualquier lugar de tu código HTML delimitado por la etiqueta donde pusiste la directiva ng-app eres capaz de colocar expresiones. En Angular podemos una gama de tipos de expresiones, de momento hagamos una prueba colocando una expresión así.
<h1>{{ 1 + 1}}</h1>Angular cuando se pone a ejecutar la aplicación buscará expresiones de este estilo y lo que tengan dentro, si es algo que él pueda evaluar, lo resolverá y lo sustituirá con el resultado que corresponda.
Puedes probar otra expresión como esta:
{{ "Hola " + "DesarrolloWeb" }}Al ejecutarlo, AngularJS sustituirá esa expresión por "Hola DesarrolloWeb". Estas expresiones no me aportan gran cosa de momento, pero luego las utilizaremos para más tipos de operaciones.
Lo habitual de las expresiones es utilizarlas para colocar datos de tu modelo, escribiendo los nombres de las "variables" que tengas en el modelo. Por ejemplo, si tienes este código HTML, donde has definido un dato en tu modelo llamado "valor":
<input type="text" ng-model="valor" />Podrás volcar en la página ese dato (lo que haya escrito en el campo INPUT) por medio de la siguiente expresión:
{{valor}}Otro detalle interesante de las expresiones es la capacidad de formatear la salida, por ejemplo, diciendo que lo que se va a escribir es un número y que deben representarse dos decimales necesariamente. Vemos rápidamente la sintaxis de esta salida formateada, y más adelante la utilizaremos en diversos ejemplos:
{{ precio | number:2 }}Cabe decir que estas expresiones no están pensadas para escribir código de tu programa, osea, lo que llamamos lógica de tu aplicación. Como decíamos, están sobre todo pensadas para volcar información que tengas en tu modelo y facilitar el "binding". Por ello, salvo el operador ternario (x ? y : z), no se pueden colocar expresiones de control como bucles o condicionales. Sin embargo, desde las expresiones también podemos llamar a funciones codificadas en Javascript (que están escritas en los controladores, como veremos enseguida) para poder resolver cualquier tipo de necesidad más compleja.
Hasta aquí hemos descrito todos los componentes de AngularJS que ya conociste en el artículo de los Primeros pasos con AngularJS. Ahora vamos a conocer otros componentes de las aplicaciones que podemos hacer con este framework Javascript.
Alberto Basalo
Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript,...