Expresiones de AngularJS: Array, Objetos, $eval, Cadenas

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Las expresiones de AngularJS son fragmentos de código que se colocan entre llaves dobles y que vinculan datos directamente a una plantilla. Evalúan números, cadenas, objetos y matrices, y la función $eval realiza la misma evaluación desde dentro de un controlador.

  • 🧩 Sintaxis de enlace: Double Las llaves generan un valor donde se encuentra la expresión, dando el mismo resultado que la directiva ng-bind.
  • 🔢 Tipos admitidos: Numbers, cuerdas, JavaLos objetos de script a los que se accede mediante la notación de punto, y los arrays a los que se accede mediante índice, se evalúan correctamente.
  • 🏷️ Variables en línea: La directiva ng-init declara variables a nivel de vista que las expresiones pueden leer sin necesidad de un controlador.
  • 🛡️ Evaluación indulgente: Las propiedades indefinidas producen undefined en lugar de lanzar el ReferenceError simple. JavaEl script se elevaría.
  • 🚫 Límites estrictos: Los bucles, las excepciones, las declaraciones de funciones, las expresiones regulares y los operadores coma y vacío no están disponibles.
  • ⚙️ Evaluación del controlador: $scope.$eval evalúa una cadena de expresión en el código del controlador y expone el resultado a la vista.
  • ⚠️ Estado del soporte: AngularJS llegó al final de su ciclo de vida el 31 de diciembre de 2021 y ya no recibe más parches de seguridad.
Descubre más

Expresiones AngularJS

¿Qué son las expresiones de AngularJS?

Las expresiones son variables escritas entre llaves dobles. {{ }}Son muy comunes en AngularJS y aparecen a lo largo de los tutoriales anteriores de esta serie.

⚠️ Aviso de soporte: AngularJS alcanzó fin de vida el 31 de diciembre de 2021 y no recibe más parches ni correcciones de seguridad. La sintaxis que se muestra a continuación sigue siendo válida para el mantenimiento de las aplicaciones AngularJS 1.x existentes; los nuevos proyectos deben usar la sintaxis moderna. Angular, donde aún existen llaves de interpolación pero ng-init y $eval no haga.

Explicación de expresiones de AngularJS con un ejemplo

Las expresiones de AngularJS se escriben dentro de llaves dobles, como en {{expression}}.

Sintaxis: un ejemplo sencillo de una expresión es {{5 + 6}}.

Las expresiones de AngularJS vinculan los datos al HTML de la misma manera que la directiva ng-bind, y AngularJS muestra los datos exactamente donde se coloca la expresión.

En este ejemplo mostramos una simple suma de números como una expresión.

Expresiones AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Explicación:

  1. La directiva ng-app está vacía, lo que significa que ningún módulo proporciona controladores, directivaso servicios a esta página.
  2. Una expresión simple suma dos números.

Salida:

Expresiones AngularJS

Se realiza la suma de 9 y 6 y se muestra el resultado, 15.

AngularJS Numbers

Las expresiones trabajan con números. Este ejemplo multiplica dos variables numéricas, margin y profity muestra el producto.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Explicación:

  1. La directiva ng-init define variables y sus valores en la propia vista, de forma muy similar a como las variables locales en cualquier lenguaje de programación. aquí margin y profit son declarados y asignados.
  2. La expresión multiplica entonces esas dos variables locales.

Salida:

AngularJS Numbers

Se realiza la multiplicación de 2 por 200 y se muestra el producto, 400.

Cadenas AngularJS

Las expresiones también funcionan con cadenas. Este ejemplo define firstName y lastName y muestra ambos.

Cadenas AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Explicación:

  1. La directiva ng-init define firstName con el valor “Guru"Y lastName con el valor “99”.
  2. Las expresiones {{firstName}} y {{lastName}} Lee esas variables y muéstralas en la vista.

Salida:

Cadenas AngularJS

Ambos valores aparecen en pantalla.

ARTÍCULOS RELACIONADOS

Objetos de AngularJS

Las expresiones funcionan con JavaScript objetos, que consisten en pares nombre-valor. La sintaxis de un JavaEl objeto Script tiene este aspecto:

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

Este ejemplo define una person objeto que contiene dos pares clave-valor, firstName y lastName.

Objetos de AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Explicación:

  1. La directiva ng-init define el objeto person con los pares clave-valor firstName establecido en “Guru"Y lastName establecido en “99”.
  2. Las expresiones {{person.firstName}} y {{person.lastName}} Lee esos miembros. Como pertenecen al objeto, se requiere la notación de puntos para acceder a sus valores.

Salida:

Objetos de AngularJS

Los valores de firstName y lastName aparecer en pantalla.

Matrices AngularJS

Las expresiones funcionan con matrices. Este ejemplo define una matriz que contiene las calificaciones de un estudiante en tres asignaturas y muestra cada valor.

Matrices AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Explicación:

  1. La directiva ng-init define el array. marks con los tres valores 1, 15 y 19.
  2. Expresiones de la forma marks[index] leer cada elemento.

Salida:

Matrices AngularJS

Se muestran las marcas definidas en la matriz.

Capacidades y limitaciones de la expresión AngularJS

Capacidades

  1. Las expresiones de AngularJS se parecen JavaLas expresiones de script comparten gran parte de la misma potencia y flexibilidad.
  2. Donde JavaEl script genera un ReferenceError o TypeError en una propiedad indefinida; la evaluación de AngularJS es indulgente y devuelve undefined o null.
  3. Se pueden aplicar filtros dentro de una expresión para dar formato a los datos antes de que se muestren.
  4. El operador ternario es compatible, por lo tanto {{ isReady ? 'Yes' : 'No' }} es válida.

Limitaciones

  1. Los bucles y el manejo de excepciones no se pueden usar dentro de una expresión de AngularJS. La lógica condicional se limita al operador ternario; if Los extractos no están disponibles.
  2. Las funciones no se pueden declarar dentro de una expresión, ni siquiera dentro de una directiva ng-init.
  3. Las expresiones regulares no se pueden crear dentro de una expresión. Una expresión regular es una combinación de símbolos y caracteres que se utilizan para hacer coincidir cadenas, como .*\.txt$y tales literales son rechazados.
  4. El operador coma (,) y el void Los operadores no están autorizados.

ng-bind vs. llaves de expresión: ¿Cuál usar?

Double Las llaves y la directiva ng-bind producen el mismo resultado renderizado, por lo que la elección entre ellas parece arbitraria. Pero no lo es. Ambas se comportan de manera diferente justo antes de que AngularJS termine de cargar, y esa diferencia es visible para el usuario de la página.

Aspecto {{ expression }} ng-bind
Escrito en Contenido del elemento Un atributo de elemento
Antes de que AngularJS se cargue Los brackets sin pintar aparecen fugazmente en la pantalla. No se muestra nada
Legibilidad Más alto: el valor se sitúa en línea Menor: el valor está oculto en un atributo.
Múltiples valores por elemento Sí: No, solo una encuadernación
Encuadernación única Si con {{::value}} Si con ng-bind="::value"

La breve aparición de llaves sin interpolación se conoce como destello de contenido no interpolado, y ocurre porque el navegador renderiza el marcado antes de que AngularJS lo compile. Utilice `ng-bind` o añada la directiva `ng-cloak` para el contenido visible sin necesidad de desplazarse. Las llaves siguen siendo la opción más clara y legible en cualquier otro caso, especialmente cuando aparecen varios valores dentro de un mismo elemento.

Diferencia entre expresión y $eval

El $eval La función evalúa expresiones desde dentro del controlador. Las expresiones se evalúan en la vista, mientras que $eval Se evalúa en el código del controlador.

Este ejemplo usa $eval Sumar dos números y colocar el resultado en el objeto scope para que la vista pueda mostrarlo.

Diferencia entre expresión y $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Explicación:

  1. Dos variables de alcance, a y b, cada uno tiene el valor 1.
  2. $scope.$eval evalúa su suma y asigna el resultado a la variable de alcance value.
  3. La vista se muestra a continuación value.

Salida:

Diferencia entre expresión y $eval

La salida muestra la expresión evaluada dentro de la controlador, con la suma de las dos variables de ámbito enviadas y mostradas en la vista.

Preguntas Frecuentes

Anteponer dos puntos a una expresión, como en {{::name}}Deja de monitorizarlo una vez que se resuelve un valor. Esto elimina el monitor y reduce el coste de digestión en páginas con muchos enlaces estáticos.

$eval evalúa una cadena inmediatamente contra una global. $parse Devuelve una función reutilizable para su evaluación repetida. $interpolate Maneja una cadena de plantilla completa que contiene llaves en lugar de una sola expresión.

Principalmente. AI Las herramientas conservan las llaves y reescriben los filtros como tuberías, pero las variables ng-init no tienen un equivalente en Angular y deben moverse manualmente a una clase de componente.

Las herramientas de IA analizan las plantillas en busca de llamadas a funciones dentro de las vinculaciones, que se vuelven a ejecutar en cada ciclo de digestión, y sugieren almacenar en caché el resultado en el ámbito o cambiar a una vinculación de un solo uso.

La evaluación de AngularJS es deliberadamente permisiva. Si falta una propiedad, se devuelve `undefined`, que se muestra como una cadena vacía, por lo que un valor en blanco suele indicar un error tipográfico en la ruta de la propiedad, en lugar de un fallo en tiempo de ejecución.

Resumir este post con: