Las directivas en AngularJS son atributos extendidos que comienzan con el prefijo ng-
Dentro de estas directivas podemos encontrar:
En el siguiente ejemplo se puede observar como funciona una aplicación completa:
Primero podemos observar como se inicia la aplicación y se le da un valor inicial a la variable algo.
En segundo lugar aparece el input de tipo text donde recoge el valor con ng-model y finalmente como el propio script recoge la variable y la muestra utilizando {{ algo }}
Como se puede observar en este script, no hemos inicializado las variables (Ya que no es necesario), además hay dos variables que recogen su valor desde sendos ng-model que finalmente son utilizados para una expresión aritmética y calcular el total...
Se declara un array unidimensional y luego con la directiva ng-repeat se hace que x en nombres ponga un nuevo elemento <li> con la expresion {{ x }}
De hecho esto puede ir a más, utilizando arrays bidimensionales como en el siguiente ejemplo:
Podemos ver como el array es recorrido por su dos campos y mostrado en una lista, además podemos fijarnos de que en la expresión se coloca texto adicional, con + ', ' +
Dentro de estas directivas podemos encontrar:
- ng-app que inicializa la aplicación de AngularJS, que puede tener un valor para enlazarla a un modulo, como veremos más adelante.
- ng-init que inicializa los datos de la aplicación
- ng-model que recoge los datos de los diferentes inputs para la aplicación.
- ng-repeat clona elementos html por cada elemento de una colección (array).
En el siguiente ejemplo se puede observar como funciona una aplicación completa:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="algo='Mateoooo'">
<p>Escribe algo en la caja:<input type="text" ng-model="algo"></p>
<p>Has escrito: {{ algo }}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Primero podemos observar como se inicia la aplicación y se le da un valor inicial a la variable algo.
En segundo lugar aparece el input de tipo text donde recoge el valor con ng-model y finalmente como el propio script recoge la variable y la muestra utilizando {{ algo }}
Enlace de datos
Una aplicación de AngularJS no tiene por que tener una sola variable, como vemos en el siguiente ejemplo los datos pueden ser varios, siempre y cuando las variables se llamen de forma diferente:<!DOCTYPE html>
<html>
<body>
<div data-ng-app="">
<h2>Calculo de coste</h2>
Cantidad: <input type="number" ng-model="cantidad">
Precio: <input type="number" ng-model="precio">
<p><b>Total:</b> {{cantidad * precio}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Como se puede observar en este script, no hemos inicializado las variables (Ya que no es necesario), además hay dos variables que recogen su valor desde sendos ng-model que finalmente son utilizados para una expresión aritmética y calcular el total...
Repitiendo elementos de HTML
Un uso muy interesante en AngularJS es que se pueden añadir nuevos elementos html, como podemos ver en el siguiente ejemplo:<!DOCTYPE html>
<html>
<body>
<div data-ng-app="" ng-init="nombres=['Pepe','Maria','Antonio', 'Paco']">
<p>bucle con ng-repeat:</p>
<ul>
<li ng-repeat="x in nombres">
{{ x }}
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Se declara un array unidimensional y luego con la directiva ng-repeat se hace que x en nombres ponga un nuevo elemento <li> con la expresion {{ x }}
De hecho esto puede ir a más, utilizando arrays bidimensionales como en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="nombres=[
{nombre:'Jani',pais:'Norway'},
{nombre:'Hege',pais:'Sweden'},
{nombre:'Kai',pais:'Denmark'}]">
<p>Bucle con objetos:</p>
<ul>
<li ng-repeat="x in nombres">
{{ x.nombre + ', ' + x.pais }}</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Podemos ver como el array es recorrido por su dos campos y mostrado en una lista, además podemos fijarnos de que en la expresión se coloca texto adicional, con + ', ' +
No hay comentarios:
Publicar un comentario