ng-app: A estas alturas ya conocemos esta directiva, se describió en la entrada anterior, pero no está de más incluirla en este pequeño recopilatorio. Lo que hace es identificar la etiqueta HTML que la contiene como aplicación AngularJS. Es posible asignarle un valor, que será el nombre de nuestra aplicación (que no tiene por qué ser el mismo nombre del módulo). 1 2 <!-- ng-app directive --> <body ng-app="app"> ng-controller: El elemento HTML que contenga esta directiva, tendrá como controlador el valor que conste en la directiva. Por ejemplo, imaginemos que un elemento div contiene la directiva ng-controller=”mainCtrl”; en este caso el controlador mainCtrl haría de manejador de ese elemento. 1 2 3 4 <!-- ng-controller directive --> <div ng-controller="mainCtrl"> <!-- your AngularJS content goes here --> </div> ng-init: Según la documentación de AngularJS, hoy en día, esta directiva sólo sirve para aplicar desvíos especiales en la directiva ng-repeat. La realidad es que actualmente, esto se puede hacer directamente en la directiva ng-repeat sin necesidad de recurrir a ng- init; luego lo veremos en los ejemplos. Esta directiva también nos sirve para inicializar variables directamente en la vista, sin necesidad de que sea el controlador quien las proporcione. 1 2 3 4 5 6 7 8 9 10 <!-- ng-init directive: create object into view --> <div ng-init="friends = [{name:'Javier', age:'29'}, {name:'Pedro', age:'54'}, {name:'Agustín', age:'10'}, {name:'Rebeca', age:'34'}, {name:'María', age:'74'}, {name:'Víctor', age:'48'}]"></div> <!-- ng-init directive: object from function --> <div ng-init="init()"> ng-repeat: Esta directiva nos permite iterar a través de cualquier enumerable directamente en la vista, de lo que se deduce que ese enumerable, o array por ejemplo, debe estar definido en algún lugar, bien utilizando la directiva ng-init, bien incluyendo la variable en el controlador. Esta directiva también se puede utilizar de varias formas en función de lo que más nos interese. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!-- ng-repeat directive: simple --> <ul ng-init="array = ['One', 'Two', 'Three', 'Four']"> <li ng-repeat="item in array">{{item}}</li> </ul> <!-- ng-repeat directive: using ng-init directive --> <!-- $scope.elements = [{"title":string, "list": string array}, {}, {}, ...] --> <div ng-repeat="element in elements" ng-init="elementIndex = $index"> <h4>{{element.title}}</h4> <ul> <li ng-repeat="item in element.list" ng-init="itemIndex = $index"> Element index: {{elementIndex}} || Item index: {{itemIndex}} || Item content: {{item}} </li> </ul> </div> <!-- ng-repeat directive: track by $index --> <ul ng-init="array = ['One', 'Two', 'Three', 'Four']"> <li ng-repeat="item in array track by $index"> Item index: {{$index}} || Item content: {{item}} </li> </ul> <!-- ng-repeat directive: (index, item) --> <ul ng-init="array = ['One', 'Two', 'Three', 'Four']"> <li ng-repeat="(index, item) in array"> Item index: {{index}} || Item content: {{item}} </li> </ul> Con la directiva ng-repeat podemos extender el template HTML que se repetirá con cada iteración haciendo use de las directivas ng-repeat-start y ng-repeat-end, por ejemplo de la forma que se muestra abajo: 1 2 3 4 <!-- ng-repeat-start / ng-repeat-end directives --> <ul ng-init="array = ['One', 'Two', 'Three', 'Four']"> <li ng-repeat-start="name in names">{{name}}</li> <hr ng-repeat-end /> 5 </ul> ng-show / ng-hide: Con estas directivas podemos esconder o mostrar un elemento en base a una variable o un método definido previamente. En algunas ocasiones, puede ser interesante utilizar esta directiva. Por ejemplo, si quisiéramos mostrar algún elemento sólo en las iteraciones pares, podríamos definir una función en el controlador que nos diga si el índice del elemento es par o no, y aplicarlo con la directiva ng-show o ng- hide. 1 2 3 4 5 6 <!-- ng-show / ng-hide directives --> <ul ng-init="array = ['One', 'Two', 'Three', 'Four']"> <li ng-repeat="(index, item) in array" ng-show="isEven(index)"> Index: {{index}} || Item: {{item}} </li> </ul> ng-class: La directiva ng-class nos permite asignar clases a los elementos HTML de la página, pero también podemos pasarle valores a través de variables que contengan bien valores true o false, bienstrings con nombres de las classes. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <style> .boldText { font-weight: bold; } .redText { color: red; } </style> <!-- ng-class directive: simple class --> <div ng-class="'boldText'">Some text</div> <!-- ng-class directive: using vars --> <!-- $scope.someVar = 'redText' --> <div ng-class="someVar">Some text</div> <!-- ng-class directive: using objects --> <!-- $scope.boldVar = true, $scope.redVar = true --> <div ng-class="{ boldText: boldVar, redText: redVar }">Some text</div> ng-template / ng-include: Estas dos directivas nos permiten, por un lado definir templates con ng-template y, por otro, hacer uso de esos templates definidos haciendo uso de la directiva ng-include. Como veis abajo, el valor para esta directiva se pone entre comillas simples porque le estamos pasando un string, en lugar de una variable o un id. La directiva ng-include nos va a venir muy bien para formarlayouts con partes dinámicas y partes estáticas, y además de templates o plantillas, acepta también rutas a archivos HTML que tengamos en el proyecto.. 1 2 3 4 5 6 7 8 9 <!-- ng-template directive --> <!-- $scope.variables = 'variables' --> <script type="text/ng-template" id="partial.html"> <h1>Esto es un template de AngularJS</h1> <p>Haciendo uso de un controlador, también podemos incluir {{variables}}</p> </script> <!-- ng-include directive --> <div ng-include="'partial.html'"></div> ng-model: La directiva ng-model nos permite asignar el valor de un elemento input, select y/o textareaa una variable definida previamente. Este valor queda automáticamente relacionado con el elemento, de tal forma que si la variable cambia, el valor del elemento también cambiará y, si cambiamos el valor de la variable en el elemento input, select y/o textarea, cambiará en todo el alcance de la variable. 1 2 3 4 <!-- ng-model directive --> <!-- $scope.someVar = 'Type here...' --> <input type="text" ng-model="someVar" /><br /> <span>{{someVar}}</span> ng-bind: Con esta directiva hacemos algo parecido a lo que hace ng-model, con la diferencia de que podemos aplicarlo a cualquier elemento HTML y que no podremos cambiar el valor de la variable desde el elemento, sino que el valor del elemento se actualizará cada vez que cambie la variable. 1 2 3 4 5 6 <!-- ng-model directive --> <!-- $scope.someVar = 'Type here...' --> <input type="text" ng-model="someVar" /> <!-- ng-bind directive --> <span ng-bind="someVar" /> Bien, quería repasar algunas directivas más, pero la entrada se está alargando demasiado. Ahora vamos a ver qué son, cómo se utilizan y para qué podemos utilizar los filtros de AngularJS.