logo angularJS

Aprendiendo AngularJS (IV). Las directivas.

En entregas anteriores trabajamos con algunas directivas como ng-app, ng-init, etc. En esta entrega nos adentraremos más en el mundo de las directivas.

La directiva ng-repeat

Veamos un ejemplo algo más complejo de utilización de esta directiva y luego lo comentamos paso a paso:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myfpschoolapp">

<script>
var app = angular.module("myfpschoolapp", []);
app.directive("myfpschooldir", function() {
return {
template : "<strong>Nombre del alumno:</strong>"
};
});
</script>

<div ng-init="nombres=['Perico','Juanico','Andrés']">

<ul>
<li ng-repeat="x in nombres">
<myfpschooldir></myfpschooldir> {{ x }}
</li>
</ul>

<ul>
<li ng-repeat="x in nombres">
<div myfpschooldir></div> {{ x }}
</li>
</ul>

<ul>
<li ng-repeat="x in nombres">
<p myfpschooldir></p> {{ x }}
</li>
</ul>
</div>

</body>
</html>

En primer lugar lo que hemos hecho es hacer que la aplicación Angular sea toda la página web, que ocupe todo el body con el siguiente comando:

<body ng-app="myfpschoolapp">

Una vez hecho eso, hemos creado una directiva que la hemos llamado myfpschooldir la cual genera la cadena «Nombre del alumno:» en negrita.

<script>
var app = angular.module("myfpschoolapp", []);
app.directive("myfpschooldir", function() {
return {
template : "<strong>Nombre del alumno:</strong>"
};
});
</script>

Como puedes ver, la directiva la hemos colocado dentro de un módulo. Al crear la directiva dentro de la aplicación ya podremos utilizarla dentro de la misma.

Posteriormente inicializamos el array nombres con una serie de valores para luego poder utilizarlos como expresiones dentro de nuestro código HTML:

<div ng-init="nombres=['Perico','Juanico','Andrés']">

Una vez inicializadas las variables lo que hacemos es utilizar la directiva ng-repeat para poder recorrer los valores de los arrays:

<li ng-repeat="x in nombres">
Ejercicio 4.1:
Copia el código anterior y haz que funcione. Como verás, el resultado de los tres bucles es parecido pero no idéntico. Investiga si puedes hacer que los tres bucles tengan un resultado idéntico.
Ejercicio 4.2:
Dentro de las directivas puedes crear restricciones para elementos, atributos, clases y comentarios. En el ejercicio anterior crea una restricción solamente para Elementos y vuelve a ejecutar el código.
¿Es el mismo resultado?
Razona tu respuesta.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.