Material‎ > ‎Software‎ > ‎Angular JS‎ > ‎

AngularJS - Directivas

HTML tiene tags:
  • pobres
  • de bajo nivel
  • más bien orientados a "documentos" (como parrafo, título, etc) y no "componentes de una interfaz de usuario" (como "combo con autocomplete", "datetimebox", "lista paginada", etc)
Si bien se pueden construir con Html + Javascript + CSS, no es algo que querramos hacer en cada página o aplicación. Entonces
  • sería bueno definir tags propios. Ok, a esto AngularJS lo llama directiva
  • que eleven el nivel de abstracción, introduciendo la idea de nuevos "componentes"
  • y que permitan separar:
    • programación de componentes
    • programación de aplicaciones específicas (usan la directiva)

Preprocesamiento y Directivas de AngularJS

Angular "preprocesa" el html que se carga en el browser. Así como un compilador pasa por nuestro código en otro lenguaje. Angular "lee" nuestros tags y así genera más html.
Así por ejemplo esto:

<ul>
    <li ng-repeat="libro in libros">
       ...
    </li>
</ul>

Es interpretado por Angular y genera un "<li>" por cada elemento en el modelo"

<ul>
    <li> ... </li>
    <li> ... </li>
    <li> ... </li>
</ul>

Por ejemplo, si tuvieramos 3 libros.
Nada nuevo, es posible que ya hayamos usado el ng-repeat. Lo loco acá es darse cuenta que esta "instrucción" o este "componente" de Angular es en realidad una "directiva" y, que, nosotros podemos hacer una propia.

¿Qué es una directiva? (primera definición)

Una primer definición sería que una directiva es un tipo de componente en Angular, que se usa en el html, y que cuando angular "lo ve" hace algo con eso, alterando el html. De hecho le llamamos directiva, porque cuando la definimos, le estamos indicando a Angular qué hacer cuando la encuentre en el html.

Más formalmente: Objetivo

Las directivas definen tags o atributos nuevos que por un lado extienden las -escasas- capacidades de HTML para definir componentes visuales y por otro permite reutilizar dichos componentes en cada una de las vistas.
Entonces podríamos definir directivas para
  • mostrar un usuario
  • ingresar una fecha en un calendario específico
  • ingresar un número haciendo adaptaciones de formato (por ejemplo, considerando la coma como separador de decimales)
La directiva puede
  • interceptar eventos
  • manipular el DOM para modificar en forma dinámica el formulario web: esto incluye generar / eliminar controles o bien cambiar propiedades de los mismos.

Directivas que vienen con AngularJS (Built-in)

Algunas directivas que vienen con AngularJS quizás ya las conozcas:
  • ng-app: asocia una aplicación AngularJS dentro del contexto de una página html.
  • ng-controller: define el controller y lo asocia a un contexto, representado por un contenedor en la jerarquía de un formulario web.
  • ng-model: define un binding bidireccional entre un control y su modelo. 
  • ng-bind: establece un binding unidireccional desde el modelo hacia la vista, usualmente para mostrar información de un objeto.

ngRepeat en detalle

Esta directiva nos permite mostrar estructuras repetitivas como por ejemplo listas o tablas. 
Para consultar la documentación oficial: ngRepeat directive
Veamos otro ejemplo de uso, que muestra contactos de nuestro celular

<body ng-controller="PhoneListCtrl as phoneCtrl">
  <ul>
    <li ng-repeat="phone in phoneCtrl.phones">
       {{phone.name}}
       <p>{{phone.snippet}}</p>
     </li>
  </ul>
</body>

Donde:
  • ng-repeater: Es un repetidor, en este caso dice que repita el tag <li> (un bullet) por cada objeto teléfono que se encuentre en la colección phones (es como un for each)
  • ng-controller: para poder acceder a la colección phones, necesitamos incorporarlo al scope del contenedor body mediante esta directiva, Entonces todo lo que esté dentro del body puede acceder al juego de variables del objeto definido por el controller PhoneListCtrl.
  • las expresiones entre doble llaves {{}} son bindings contra los objetos que están en el contexto, como
    • el modelo del controller ("PhoneListCtrl") 
    • y la referencia phone dentro del contenedor ng-repeat 
Comments