angular (2): plantillas y eventos

En esta entrada profundizaremos en la renderización de las vistas.

Lilanga

archivado en: JavaScript / 6 mayo, 2014 / taller:

En la entrada anterior vimos cómo funcionaba el mecanismo básico de angular y su sistema de plantillas, en el cual se reemplazaban las variables contenidas entre llaves por los valores indicados en los controladores correspondientes.

Por ejemplo, si en index.html tenemos esto:

...

<body ng-app>

<h3>Animales</h3>

<div ng-controller='controladorAnimales'>

<p>{{animal}}</p>

</div>

...

Y en main.js, esto otro:

function controladorAnimales($scope) {

$scope.animal = "Gato";

}

En el navegador aparecería nuestro «Gato».

Las llaves, en realidad, son un método abreviado de utilizar la directiva ng-bind (y recordemos que «directivas» son esa especie de atributos que se colocan en los tags de html que empiezan siempre por ng-). Así, en vez de las llaves, podríamos haber escrito esto:

...

<div ng-controller='controladorAnimales'>

<p ng-bind='animal'></p>

</div>

...

En general, si la página es compleja, es aconsejable utilizar ng-bind en vez de las llaves, ya que estas últimas pueden llegar a verse por el usuario durante la carga de la página, mientras que ng-bind es invisible. Es decir, antes de verse Gato, en pantalla aparecería {{animal}}.

Si aún así, queremos emplear las llaves, una forma de solucionar este problema es con la directiva ng-cloack, que se puede traducir como ng-manto o ng-capa y que consiste en lo siguiente. En las CSS indicamos que esos elementos no tendrán visibilidad:

[ng\:cloak], [ng-cloak], .ng-cloak {

display: none !important;

}

y en el código normal:

<p ng-cloak>{{animal}}</p>

De esa manera, esos fragmentos de código no se visualizan hasta que se carga angular, momento en el que se eliminan todos los ng-cloack, con lo que recuperan la visibilidad ya renderizados.

Iteraciones

Una cosa bien chula de estas plantillas es que podemos iterar un fragmento mediante la directiva ng-repeatque es muy parecido a los foreach tal as $clave=>$valor de toda la vida. Su sintaxis básica es:

<tagContenedor ng-repeat='item in items'  ng-bind='item.loquesea'></tagContendor>

Por ejemplo, en nuestro controlador, que vamos a convertir en un objeto, más elegante que una función, añadimos un JSON de este tipo:

var controladorAnimales = function ($scope) {

$scope.animales = [

{ especie: 'gatos', clase: 'mamíferos' },

{ especie: 'polilla', clase: 'insectos' },

{ especie: 'chimpancés', clase: 'mamíferos' },

{ especie: 'elefantes', clase: 'mamíferos' },

{ especie: 'dodos', clase: 'aves' },

{ especie: 'lagartijas', clase: 'reptiles' }

];

};

Y ahora en la vista, es decir, en index.html, añadimos la directiva ng-repeat y especificamos qué dato del jasonako debe mostrarse en cada iteración:

<div ng-controller='controladorAnimales'>

<ul>

<li ng-repeat='animal in animales'  ng-bind='animal.especie'></li>

</ul>

</div>

Dentro de uno de estos bucles, tenemos a nuestra disposición estas variables;

  • $index: índice de la iteración (-1 si no hay ninguna).
  • $first: true si es el primer elemento.
  • $middle: si es el del en medio.
  • $last: true si es el del final.
  • $even: true si es par.
  • $odd; si es impar.

Así, por ejemplo, podríamos añadir un número a nuestra lista (ejemplo absurdo, ya lo sé, pero didáctico :P).

<ul>

<li ng-repeat='animal in animales'>{{$index}}. {{animal.especie}}</li>

</ul>

* Obsérvese que en este caso empleo el sistema de llaves, pues de lo contrario se pisaría el número que genera $index al renderizarse por ng-bind.

Filtros

En un bucle mediante ng-repeat podemos aplicar filtros (filter) en función de distintos parámetros. Su sintaxis más sencilla es:

<tagContenedor ng-repeat="item in items | filter:{clave:'valor'}">

Por ejemplo, de esta manera solo se mostrarían los animales de la clase mamíferos:

<li ng-repeat="animal in animales | filter:{clase:'mamíferos'}"> {{animal.especie}}</li>

Hay varios tipos de filtros, pero de momento solo voy a destacar uno más, orderBy, que nos permite ordenar el resultado en función de algún criterio.

<ul>

<li ng-repeat="animal in animales | orderBy:'especie' "> {{animal.especie}}</li>

</ul>

Si le añadimos un signo menos al valor (-especie), el orden será descendente (y esto combinado con el filtro limitTo, permite crear datatables chulas).

Eventos

los eventos básicos de angular son:

De ratón:

  • ng-click
  • ng-dblclick
  • ng-mouseover
  • ng-mousemove
  • ng-mouseenter
  • ng-mousedown
  • ng-mouseup

De teclado:

  • ng-keypress
  • ng-keyup
  • ng-keydown

De pantallas táctiles:

  • ng-click
  • ng-swipe-left
  • ng-swipe-right

Más o menos, todos funcionan igual. Se incluyen en el tag contenedor y ahí mismo se especifica qué debe suceder con ese evento, lo cual no tengo claro si es una involución respecto a la manera tan limpita que nos ofrece jQuery de bindear las cosas. Por ejemplo, retomando el código de las entradas anteriores, vamos a añadir un evento tras el listado de animales:

<div ng-controller='controladorAnimales'>

<p ng-click='miFuncion()'>Pulsa aquí</p>

</div>

En este caso, estamos llamando a miFuncion() cuando pulsamos en ese párrafo, que es una función que podemos definir en el controlador:

var controladorAnimales = function ($scope) {

$scope.miFuncion = function () {

alert('Hola Mundo');

}

};

En las funciones lanzadas por un evento, como ocurre en otras variantes de javaScript, se puede recuperar el propio evento. En este caso no hace falta pasarlo por parámetro, sino que existe siempre en una variable denominada event. Así, por ejemplo, obtendríamos la coordenada x de la pantalla en la que se efectuó el click:

console.log(event.pageX);

Con un console.log(event) podemos ver todo lo que incluye, así que no lo trataré más aquí. En vez de eso, explicaré cómo pasar parámetros a las funciones y es... como siempre:

<p ng-click="miFuncion('soy un parámetro')">Pulsa aquí</p>

....

$scope.miFuncion = function (parametro) {

console.log(parametro);

}

¿Sencillo, no?

Bueno, por hoy ya está bien :P.

|| Tags:

valoración de los lectores sobre angular (2): plantillas y eventos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (10 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.