AngularJS - Expresiones - Expresiones Numericas - Expresiones con cadenas de texto - Expresiones con Objetos - Expresiones con Arrays

Siguiendo con la guia de primeros pasos con AngularJS hoy vamos a ver todo lo relaciones con la expresiones en angular.

AngularJS - Expresiones

Las expresiones es la manera que AngularJS tiene para representar valores en un documento HTML. Estas expresiones son normales en JavaScript para sumar, restar o multiplicar algún dato, mostrar String, ademas nos ayuda a mostrar resultados y variables, pero en AngularJS son mucho mas potentes ya que se pueden contener literales, operadores y variables.

Las expresiones en AngularJS se escriben dentro de dos llaves de inicio y fin: {{expresión}}.

Las expresiones tiene que estar englobadas dentro de un elemento o etiqueta que utilice la directiva ng-app.

AngularJS - Expresiones Numericas

Las expresiones numericas en AngularJS funcionan igual que JavaScript. Ejemplo:

<span> Cantidad a pagar {{5 * 5}}</span>

Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/).

AngularJS - Expresiones con cadenas de texto

Las expresiones con cadenas son iguales a las de  JavaScript.

<span> Mi nombre es {{"Nicolas" + " " + "Codde"}}</span>

AngularJS - Expresiones con Arrays

Como ya se imaginan, la expresiones con array son idénticas a las expresiones en JavaScript, si ya sabemos programar en JavaScript tenemos un plus extra.

<span> Nombre: {{personas[1]}}</span>

AngularJS - Expresiones con Objetos

Al igual que JavaScript accedemos a las propiedades de un objeto mediante el punto "."

<span> Nombre: {{persona.nombre}}</span>

AngularJS - Expresiones con AngularJS vs Expresiones JavaScript

Las expresiones con AngularJS son bastante parecidas a las expresiones con JavaScript pero con algunas diferencias:




Contexto: expresiones de JavaScript se evalúan contra la ventana global. En angular, expresiones son evaluadas contra un objeto alcance.





Perdida: En JavaScript, tratando de evaluar las propiedades no definidas genera ReferenceError o TypeError. En angular, evaluación de la expresión es perdida es indefinido y nulo.



No hay control de flujo por estado: No puede utilizar lo siguiente en una expresión AngularJS: condicionales, bucles, o excepciones.





No hay declaraciones de función: no se pueden declarar funciones en una expresión AngularJS, incluso dentro de la directiva ng-init.




No se usa la coma y operadores Void: No se puede utilizar, o anular en una expresión AngularJS.



No se puede crear RegExp con notación literal: No se puede crear expresiones regulares en una expresión AngularJS.



Filtros: Se puede utilizar filtros dentro de expresiones para dar formato a los datos antes de mostrarlos.



Si necesitas ejecutar un código complejo JavaScript, debes hacer un método controlador y que este se llame desde la vista. 

Nota: Recalco que las expresiones no se debe utilizar para agregar lógica a la aplicación.

Es sumamente importante no cargar los HMTL / Templates con expresiones matemáticas ya que estaríamos agregando funcionalidad a la plantilla lo cual no es su objetivo, haciéndola mas difícil de mantener a futuro.