Expresiones AngularJS: MATRIZ, Objetos, $eval, Cadenas [Ejemplos]

¿Qué es Angular JS Expressions?

Las expresiones son variables que se definieron en las llaves dobles {{}}. Se usan muy comúnmente dentro de Angular JS, y los verías en nuestros tutoriales anteriores.

En este tutorial, usted aprenderá –

Explicar las expresiones Angular.js con un ejemplo

Las expresiones AngularJS son aquellas que están escritas dentro de llaves dobles {{expression}}.

Sintaxis:

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

Las expresiones Angular.js se utilizan para enlazar 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, sólo queremos mostrar una simple adición de números como una expresión.

Explicación del código:

  1. La directiva ng-app en 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 mira la adición de 2 números.

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

Salida:

De la salida,

  • Se puede ver que la adición de los dos números 9 y 6 tiene lugar y se muestra el valor añadido de 15.

Angular.js Números

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

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

Explicación del código:

1. La directiva ng-init se utiliza en angular.js para definir variables y sus valores correspondientes en la vista misma. 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 asignándoles valores.
2. A continuación, estamos utilizando las 2 variables locales y multiplicando sus valores.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

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

AngularJS Cadenas

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

En este ejemplo, vamos a definir 2 cadenas de “FirstName” y “LastName” y mostrarlas usando expresiones en consecuencia.

Explicación del código:

  1. La directiva ng-init se utiliza definir las variables FirstName con el valor “Guru” y la variable LastName con el valor de “99”.
  2. A continuación, estamos utilizando 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á la siguiente salida cuando ejecute su código en el navegador.

Salida:

A partir de la salida, se puede ver claramente que los valores de FirstName y LastName se muestran en la pantalla.

Angular.js objetos

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

Veamos un ejemplo de expresiones Angular.js con objetos javascript. Un objeto javascript consiste en un par nombre-valor.

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

Sintaxis:

En este ejemplo, vamos a definir un objeto como un objeto persona que tendrá 2 pares de valores clave de “FirstName” y “LastName”.

Explicación del código:

  1. La directiva ng-init se utiliza para definir la persona objeto que a su vez tiene pares de valores clave de FirstName con el valor “Guru” y la variable lastName con el valor de “99”.
  2. A continuación, estamos utilizando 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 de la persona objeto, tienen que acceder a ella con la notación de punto (.) para acceder a su valor real.

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

Salida:

De la salida,

  • Se puede ver claramente que los valores de “FirstName” y “SecondName” se muestran en la pantalla.

Arrays AngularJS

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

En este ejemplo, vamos a definir un array que va a contener las notas de un estudiante en 3 asignaturas. En la vista, mostraremos el valor de estas marcas en consecuencia.

Explicación del código:

  1. La directiva ng-init se utiliza definir la matriz con el nombre “marcas” con 3 valores de 1, 15 y 19.
  2. A continuación, estamos utilizando expresiones de marcas [índice] para acceder a cada elemento de la matriz.

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

Salida:

A partir de la salida, se puede ver claramente que las marcas que se muestran, que se definen en la matriz.

Capacidades y limitaciones de la expresión AngularJS

Capacidades de expresión Angular.js

  1. Las expresiones angulares son como expresiones JavaScript. Por lo tanto, tiene la misma potencia y flexibilidad.
  2. En JavaScript, cuando intenta evaluar propiedades indefinidas, genera un ReferenceError o TypeError. En Angular, la evaluación de expresiones es indulgente y genera un valor indefinido o nulo.
  3. Se pueden utilizar filtros dentro de las expresiones para dar formato a los datos antes de mostrarlos.

Limitaciones de expresión angular JS

  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$. Tales expresiones no se pueden usar dentro de las expresiones Angular JS.
  4. Además, uno no 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. Por lo tanto, mientras que las expresiones se utilizan para la evaluación en la vista, el $eval se utiliza en la función de controlador.

Veamos un ejemplo simple sobre esto.

En este ejemplo,

Solo vamos a usar la función $eval para agregar 2 números y hacerlo disponible en el objeto scope para que se pueda mostrar en la vista.

Explicación del código:

  1. Primero estamos definiendo 2 variables ‘a’ y ‘b’, cada una con un valor de 1.
  2. Estamos usando el $scope. función $eval para evaluar la adición de las 2 variables y asignarlo a la variable de alcance ‘valor’.
  3. Entonces solo estamos mostrando el valor de la variable ‘value’ en la vista.

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

Salida:

La salida anterior muestra la salida de la expresión que fue evaluada en el controlador. Los resultados anteriores muestran que la expresión $eval se utilizó para realizar la adición de las 2 variables de ámbito ‘a y b’ 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 regulares como JavaScript, como la simple adición de números.
  • La directiva ng-init se puede utilizar para definir variables en línea que se pueden utilizar en la vista.
  • Las expresiones se pueden hacer para trabajar con tipos primitivos como cadenas y números.
  • Las expresiones también se pueden usar para trabajar con otros tipos, como objetos JavaScript y matrices.
  • Las expresiones en Angular JS tienen algunas limitaciones como, por ejemplo, no tener expresiones regulares o usar funciones, bucles o declaraciones condicionales.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *