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, sólo queremos mostrar una simple suma de numbers como expresión.
<!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:
- 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.
- Estamos agregando una expresión simple que analiza la suma de 2 numbers.
Si el código se ejecuta correctamente, lo siguientewing El resultado se mostrará cuando ejecute su código en el navegador.
Salida:
Desde la salida,
- Se puede observar que la suma de los dos numbers 9 y 6 tienen lugar y se muestra el valor añadido del 15yed.
Angular.JS Numbers
Se pueden utilizar expresiones para trabajar con numbers también. Veamos un ejemplo de expresiones Angular.JS con numbers.
En este ejemplo, solo queremos mostrar una multiplicación simple de 2 variables numéricas llamadas margen y beneficio y mostraryed su valor multiplicado.
<!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:
- 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.
- 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:
Desde la salida,
- Se puede ver claramente que la multiplicación de los 2 numbers 2 y 200 tienen lugar, y se muestra el valor multiplicado de 400.yed.
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.
<!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'"> First Name : {{firstName}}<br> last Name : {{lastName}} </div> </body> </html>
Explicación del código:
- La directiva ng-init se utiliza para definir las variables nombre con el valor "Guru" y la variable apellido con el valor "99".
- 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:
En el resultado, se puede ver claramente que los valores de nombre y apellido se muestranyed 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".
<!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'}"> First Name : {{person.firstName}}<br> Last Name : {{person.lastName}} </div> </body> </html>
Explicación del código:
- 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".
- 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:
Desde la salida,
- Se puede ver claramente que se muestran los valores de "primer nombre" y "segundo nombre".yed 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.
<!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> Subject1 : {{marks[0] }}<br> Subject2 : {{marks[1] }}<br> Subject3 : {{marks[2] }}<br> </div> </body> </html>
Explicación del código:
- La directiva ng-init se utiliza para definir la matriz con el nombre "marcas" con 3 valores de 1, 15 y 19.
- 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:
En el resultado se puede ver claramente que las marcas que se muestranyed, que están definidos en la matriz.
Capacidades y limitaciones de la expresión AngularJS
Capacidades de expresión Angular.JS
- Las expresiones angulares son como expresiones de JavaScript. Por tanto, tiene el mismo poder y flexibilidad.
- 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.
- Se pueden usar filtros dentro de las expresiones para formatear los datos antes de mostrarlos.
Limitaciones de la expresión Angular JS
- Actualmente no hay disponibilidad para usar condicionales, bucles o excepciones en una expresión angular
- No puede declarar funciones en una expresión angular, ni siquiera dentro de la directiva ng-init.
- 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.
- 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,
Solo vamos a usar la función $eval para sumar 2 numbers y ponerlo a disposición en el objeto de alcance para que pueda mostrarse en la vista.
<!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:
- Primero estamos definiendo 2 variables 'a' y 'b', cada una con un valor de 1.
- Estamos usando la función $scope.$eval para evaluar la suma de las 2 variables y asignarla a la variable de alcance 'valor'.
- 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:
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.yed en la vista.
Resumen
- Hemos visto cómo las expresiones en JS angular se puede utilizar para evaluar expresiones similares a JavaScript regulares, como la simple adición de numbers.
- 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 numbers.
- 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.