Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

Componentes built-in de Angular

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 componente (anteriormente se llamaba directiva)
  • esto eleva el nivel de abstracción
  • y permite separar:
    • programación de componentes
    • programación de aplicaciones específicas (que usan los compontes  que definimos)

Preprocesamiento y Componentes 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. Por ejemplo, si tenemos tres libros:

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

Nada nuevo, es posible que ya hayamos usado el ng-repeat, solo que ahora estamos al tanto del efecto que produce en la vista.

¿Qué es un componente? (primera definición)

Un componente de Angular asocia

  • un elemento visual (html en nuestro caso)
  • con una serie de eventos (controller)
  • que afecta al modelo de dicha vista en un entorno aislado
Esto permite extender las limitaciones existentes en HTML para generar elementos reutilizables en diferentes vistas.
Entonces podríamos definir componentes 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)
El componente 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.

Componentes que vienen con AngularJS (Built-in)

Posiblemente ya 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

Este componente 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-repeat: 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 este componente, 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