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

¿Qué son las expresiones angulares JS?

Las expresiones son variables que se definieron en el double llaves {{ }}. Se usan con mucha frecuencia en Angular JS y los verá en nuestros tutoriales anteriores.

Explique las expresiones de Angular.js con un ejemplo

Las expresiones de AngularJS son aquellas que están escritas dentro double llaves {{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.

Expresiones angulares.js

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

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

</body>
</html>

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 sólo significa que no hay ningún módulo para asignar controladores, directivas, servicios adjuntos al código.
  2. Estamos sumando una expresión simple que analiza la suma de 2 números.

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

Salida:

Expresiones angulares.js

Desde la salida,

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

Números angulares.JS

También se pueden utilizar expresiones 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.

Números angulares.JS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

Explicación del código:

  1. La directiva ng-init se usa 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. Luego usamos las 2 variables locales y multiplicamos sus valores.

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

Salida:

Números angulares.JS

Desde la salida,

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

Cadenas AngularJS

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

En este ejemplo, definiremos 2 cadenas de "nombre" y "apellido" y las mostraremos usando las expresiones correspondientes.

Cadenas AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

Explicación del código:

  1. La directiva ng-init se utiliza para definir las variables nombre con el valor "Guru" y la variable apellido con el valor "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, lo siguientewing El resultado se mostrará cuando ejecute su código en el navegador.

Salida:

Cadenas AngularJS

En el resultado, se puede ver claramente que los valores de nombre y apellido se muestran en la pantalla.

Objetos Angular.JS

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

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 "nombre" y "apellido".

Objetos Angular.JS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

Explicación del código:

  1. La directiva ng-init se utiliza para definir el objeto persona que a su vez tiene pares clave-valor de nombre con el valor "Gurú" y la variable apellido con el valor "99".
  2. Luego 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, deben acceder a él con la notación de punto (.) para acceder a su valor real.

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

Salida:

Objetos Angular.JS

Desde la salida,

  • Se puede ver claramente que los valores de "primer nombre" y "segundo nombre" se muestran en la pantalla.

Matrices AngularJS

También se pueden utilizar expresiones 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.

Matrices AngularJS

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

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

Explicación del código:

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

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

Salida:

Matrices AngularJS

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

Capacidades y limitaciones de la expresión AngularJS

Capacidades de expresión Angular.JS

  1. Las expresiones angulares son como expresiones de JavaScript. Por tanto, tiene el mismo poder y flexibilidad.
  2. En JavaScript, cuando intentas 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 la 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, ni siquiera 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$. Estas expresiones no se pueden utilizar dentro de las expresiones Angular JS.
  4. Además, no se puede usar ni anular una expresión angular.

Diferencia entre expresión y $eval

La función $eval permite evaluar expresiones desde el propio controlador. Entonces, mientras 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,

Simplemente vamos a usar la función $eval para sumar 2 números y hacerlo disponible en el objeto de alcance para que pueda mostrarse en la vista.

Diferencia entre expresión y $eval

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

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

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 simplemente mostramos el valor de la variable "valor" en la vista.

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

Salida:

Diferencia entre expresión y $eval

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

Resumen

  • Hemos visto cómo las expresiones en JS angular se puede utilizar para evaluar expresiones similares a JavaScript, 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 pueden hacer expresiones para que 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 de JavaScript.
  • Las expresiones en Angular JS tienen algunas limitaciones, como por ejemplo no tener expresiones regulares ni utilizar funciones, bucles o declaraciones condicionales.