Expresiones AngularJS: ARRAY, Objects, $ eval, Strings (Ejemplos)

¿Qué es Angular JS Expressions?

Las expresiones son variables que se definieron entre llaves dobles {{}}. Se usan con mucha frecuencia dentro de Angular JS, y los verá en nuestros tutoriales anteriores.

En este tutorial, aprenderá:

  • Explicar las expresiones de Angular.js con un ejemplo
  • Números de AngularJS
  • Cadenas AngularJS
  • Objetos AngularJS
  • Matrices AngularJS
  • Limitaciones y capacidades de expresión de AngularJS
  • La diferencia entre expresiones y $ eval

Explica las expresiones de Angular.js con un ejemplo

Las expresiones de AngularJS son aquellas que están escritas entre llaves dobles {{expresión}}.

Sintaxis:

Un ejemplo simple de expresión es {{5 + 6}}.

Las expresiones Angular.JS se utilizan para vincular datos a HTML de la misma manera que la directiva ng-bind. AngularJS muestra los datos exactamente en el lugar donde se coloca la expresión.

Veamos un ejemplo de expresiones Angular.JS.

En este ejemplo, solo queremos mostrar una simple suma de números como expresión.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Explicación del código:

  1. La directiva ng-app de nuestro ejemplo está en blanco, como se muestra en la captura de pantalla anterior. Esto solo significa que no hay ningún módulo para asignar controladores, directivas, servicios adjuntos al código.
  2. Estamos agregando una expresión simple que analiza la suma de 2 números.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

De la salida,

  • Se puede ver que se produce la suma de los dos números 9 y 6 y se muestra el valor agregado de 15.

Números de Angular.JS

Las expresiones también se pueden utilizar para trabajar con números. Veamos un ejemplo de expresiones Angular.JS con números.

En este ejemplo, solo queremos mostrar una multiplicación simple de 2 variables numéricas llamadas margen y beneficio y mostrar su valor multiplicado.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Explicación del código:

  1. La directiva ng-init se usa en angular.js para definir variables y sus valores correspondientes en la propia vista. Es algo así como definir variables locales para codificar en cualquier lenguaje de programación. En este caso, estamos definiendo 2 variables llamadas margen y beneficio y les asignamos valores.
  2. Luego usamos las 2 variables locales y multiplicamos sus valores.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

De la salida,

  • Se puede ver claramente que tiene lugar la multiplicación de los 2 números 2 y 200, y se muestra el valor multiplicado de 400.

Cadenas AngularJS

Las expresiones también se pueden utilizar para trabajar con cadenas. Veamos un ejemplo de expresiones Angular JS con cadenas.

En este ejemplo, vamos a definir 2 cadenas de "firstName" y "lastName" y las mostraremos usando expresiones en consecuencia.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Explicación del código:

  1. La directiva ng-init se utiliza para definir las variables firstName con el valor "Guru" y la variable lastName con el valor de "99".
  2. Luego usamos expresiones de {{firstName}} y {{lastName}} para acceder al valor de estas variables y mostrarlas en la vista en consecuencia.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

En la salida, se puede ver claramente que los valores de firstName y lastName se muestran en la pantalla.

Objetos Angular.JS

Las expresiones también se pueden utilizar para trabajar con objetos JavaScript.

Veamos un ejemplo de expresiones Angular.JS con objetos javascript. Un objeto javascript consta de un par nombre-valor.

A continuación se muestra un ejemplo de la sintaxis de un objeto javascript.

Sintaxis:

var car = {type:"Ford", model:"Explorer", color:"White"};

En este ejemplo, vamos a definir un objeto como un objeto persona que tendrá 2 pares clave-valor de "firstName" y "lastName".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Explicación del código:

  1. La directiva ng-init se usa para definir el objeto persona que a su vez tiene pares clave-valor de firstName con el valor "Guru" y la variable lastName con el valor de "99".
  2. Entonces usamos expresiones de {{person.firstName}} y {{person.secondName}} para acceder al valor de estas variables y mostrarlas en la vista en consecuencia. Dado que las variables miembro reales son parte del objeto persona, tienen que acceder a él con la notación de punto (.) Para acceder a su valor real.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

De la salida,

  • Puede verse claramente que los valores de "firstName" y "secondName" se muestran en la pantalla.

Matrices AngularJS

Las expresiones también se pueden utilizar para trabajar con matrices. Veamos un ejemplo de expresiones Angular JS con matrices.

En este ejemplo, vamos a definir una matriz que contendrá las calificaciones de un estudiante en 3 materias. En la vista, mostraremos el valor de estas marcas en consecuencia.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Explicación del código:

  1. Se utiliza la directiva ng-init para definir la matriz con el nombre "marcas" con 3 valores de 1, 15 y 19.
  2. Entonces usamos expresiones de marcas [índice] para acceder a cada elemento de la matriz.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

En la salida, se puede ver claramente que las marcas que se muestran, que están definidas en la matriz.

Limitaciones y capacidades de expresión de AngularJS

Capacidades de expresión de Angular.JS

  1. Las expresiones angulares son como expresiones de JavaScript. Por tanto, tiene el mismo poder y flexibilidad.
  2. En JavaScript, cuando intenta evaluar propiedades no definidas, genera un ReferenceError o TypeError. En Angular, la evaluación de expresiones es indulgente y genera un valor indefinido o nulo.
  3. Se pueden usar filtros dentro de las expresiones para formatear los datos antes de mostrarlos.

Limitaciones de Angular JS Expression

  1. Actualmente no hay disponibilidad para usar condicionales, bucles o excepciones en una expresión angular
  2. No puede declarar funciones en una expresión angular, incluso dentro de la directiva ng-init.
  3. No se pueden crear expresiones regulares en una expresión angular. Una expresión regular es una combinación de símbolos y caracteres, que se utilizan para buscar cadenas como. * \. Txt $. Dichas expresiones no se pueden usar dentro de las expresiones Angular JS.
  4. Además, no se puede usar o anular en una expresión angular.

Diferencia entre expresión y $ eval

La función $ eval permite evaluar expresiones desde el propio controlador. Entonces, mientras que las expresiones se usan para la evaluación en la vista, $ eval se usa en la función del controlador.

Veamos un ejemplo sencillo sobre esto.

En este ejemplo,

Solo usaremos la función $ eval para agregar 2 números y hacer que esté disponible en el objeto de alcance para que se pueda mostrar en la vista.

Event Registration


Guru99 Global Event

{{value}}

Explicación del código:

  1. Primero estamos definiendo 2 variables 'a' y 'b', cada una con un valor de 1.
  2. Estamos usando la función $ scope. $ Eval para evaluar la suma de las 2 variables y asignarla a la variable de alcance 'valor'.
  3. Entonces solo mostramos el valor de la variable 'valor' en la vista.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

La salida anterior muestra la salida de la expresión que se evaluó en el controlador. Los resultados anteriores muestran que la expresión $ eval se usó para realizar la adición de las 2 variables de alcance 'ayb' con el resultado enviado y mostrado en la vista.

Resumen:

  • Hemos visto cómo las expresiones en Angular JS se pueden usar para evaluar expresiones similares a JavaScript regulares, como la simple suma de números.
  • La directiva ng-init se puede usar para definir variables en línea que se pueden usar en la vista.
  • Se puede hacer que las expresiones funcionen con tipos primitivos como cadenas y números.
  • Las expresiones también se pueden utilizar para trabajar con otros tipos, como matrices y objetos JavaScript.
  • Las expresiones en Angular JS tienen algunas limitaciones como, por ejemplo, no tener expresiones regulares o usar funciones, bucles o declaraciones condicionales.

Articulos interesantes...