Directivas y expresiones de AngularJS

En este post trataré de explicar en qué consisten las directivas y expresiones en AngularJS. Como mencioné en el post anterior sobre AngularJS, esta sigue una programación declarativa por tanto, las directivas son un claro ejemplo de este tipo de programación.

Directivas

En AngularJS se emplean directivas para aumentar la funcionalidad del HTML. Serían una manera para llamar a funciones JavaScript.

Aunque Angular emplea muchas directivas, me centraré en explicar algunas de las más útiles y cómo implementarlas con éxito.

Una de las directivas útiles es ng-show. Puedes mostrar u ocultar elementos con un simple booleano o una condición.

<!DOCTYPE html>
<html ng-app>
<head>
	<title>Directiva ng-show</title>
	<script src="angular.min.js"></script>
</head>
<body>
	<p ng-show="true">Me ves</p>
	<p ng-show="false">No me ves</p>
	<p ng-show="1 == 1">A que puedes verme?</p>
	<p ng-show="1 == 2">Creo que ahora no me ves</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Directiva ng-show</title>

</head>

<body>

<p ng-show="1 == 1">A que puedes verme?</p>

<p ng-show="1 == 2">Creo que ahora no me ves</p>

</body>

</html>

Aquellos párrafos con ng-show true o cuya condición resulte true, se mostrarán. En ese caso sería el 1º y 3º párrafo mientras que los false estarán ocultos.

Esta directiva es de gran utilidad ya que permiten ocultar o mostrar regiones de la interfaz basándose en los valores introducidos por el usuario u otras condiciones.

Otra directiva a tener en cuenta es ng-click. Al igual que la anterior, necesita una expresión y esta será evaluada o ejecutada cuando el elemento declarado con la directiva ng-click sea clicado.

<body>
    <button ng-click="contador = contador + 1" ng-init="contador = 0">
       Incrementar
    </button>
    Has pulsado el botón: {{contador}} veces
</body>

<body>

Incrementar

</button>

Has pulsado el botón: {{contador}} veces

</body>

Cada vez que pulses el botón verás que el contador aumenta en tiempo real. También he empleado la directiva ng-init que permite inicializar la variable contador.

Expresiones

Las expresiones en Angular son básicamente expresiones de JavaScript. Sin embargo, hay ciertos matices

En AngularJS, las expresiones no se evalúan contra el objeto window, lo hacen contra el objeto que está enfocado.
No obtienes ReferenceError o TypeError al intentar evaluar una propiedad undefined.
Puedes emplear los filtros de AngularJs antes de mostrar los datos.

Pondré una serie de expresiones de ejemplo

  <!-- Aritmética básica -->
  <p>10 + 5 = {{10 + 5}}</p>
 
  <!-- Usar métodos del objet String -->
  <p>{{"Viendo AngularJS en GuidaCode".toUpperCase()}}</p>
  <p>{{"ABCDEFG".indexOf('D')}}</p>
   
  <!-- Operacion ternaria  -->
  <p>{{1==1 ? "Correcto" : "Error"}}</p>

<p>{{"Viendo AngularJS en GuidaCode".toUpperCase()}}</p>

<p>{{"ABCDEFG".indexOf('D')}}</p>

<p>{{1==1 ? "Correcto" : "Error"}}</p>

Y hasta aquí directivas y expresiones en Angular, espero que os estéis familiarizando con este framework. A seguir picando 🙂