Espressioni AngularJS: ARRAY, Objects, $eval, Strings [Esempi]
James Hartmann
Che cosa sono le espressioni Angular JS?
Le espressioni sono variabili che sono state definite tra doppie parentesi graffe {{ }}. Sono molto comunemente utilizzate in Angular JS e le avresti viste nei nostri tutorial precedenti.
Spiegare le espressioni Angular.js con un esempio
Le espressioni AngularJS sono quelle scritte tra doppie parentesi graffe {{expression}}.
Sintassi:
Un semplice esempio di espressione è {{5 + 6}}.
Le espressioni Angular.JS vengono utilizzate per associare i dati all'HTML allo stesso modo della direttiva ng-bind. AngularJS visualizza i dati esattamente nel punto in cui è posizionata l'espressione.
Diamo un'occhiata ad un esempio di espressioni Angular.JS.
In questo esempio, vogliamo solo mostrare una semplice addizione di numeri come espressione.
<!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>
Spiegazione del codice:
- La direttiva ng-app nel nostro esempio è vuota, come mostrato nello screenshot sopra. Ciò significa solo che non esiste alcun modulo a cui assegnare i controller, direttive, servizi allegati al codice.
- Stiamo aggiungendo una semplice espressione che esamina la somma di 2 numeri.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che avviene la somma dei due numeri 9 e 6 e viene visualizzato il valore aggiunto di 15.
Angular.JS Numbers
Le espressioni possono essere utilizzate anche per lavorare con i numeri. Diamo un'occhiata ad un esempio di espressioni Angular.JS con numeri.
In questo esempio, vogliamo solo mostrare una semplice moltiplicazione di 2 variabili numeriche chiamate margine e profitto e visualizzare il loro valore moltiplicato.
<!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>
Spiegazione del codice:
- La direttiva ng-init viene utilizzata in angular.js per definire le variabili e i loro valori corrispondenti nella vista stessa. È un po' come definire variabili locali da codificare in any linguaggio di programmazione. In questo caso, stiamo definendo 2 variabili chiamate margine e profitto e assegnando loro dei valori.
- Utilizzeremo quindi le 2 variabili locali e moltiplicheremo i loro valori.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere chiaramente che avviene la moltiplicazione dei 2 numeri 2 e 200 e viene visualizzato il valore moltiplicato di 400.
Stringhe AngularJS
Le espressioni possono essere utilizzate anche per lavorare con le stringhe. Diamo un'occhiata ad un esempio di espressioni Angular JS con stringhe.
In questo esempio, definiremo 2 stringhe di "firstName" e "lastName" e le visualizzeremo utilizzando le espressioni di conseguenza.
<!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>
Spiegazione del codice:
- La direttiva ng-init viene utilizzata per definire le variabili firstName con il valore “Guru” e la variabile lastName con il valore “99”.
- Utilizzeremo quindi le espressioni di {{firstName}} e {{lastName}} per accedere al valore di queste variabili e visualizzarle di conseguenza nella vista.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'output si vede chiaramente che i valori di firstName e lastName vengono visualizzati sullo schermo.
Oggetti Angular.JS
È possibile utilizzare le espressioni con cui lavorare JavaCopione anche gli oggetti.
Diamo un'occhiata ad un esempio di espressioni Angular.JS con oggetti javascript. Un oggetto JavaScript è costituito da una coppia nome-valore.
Di seguito è riportato un esempio della sintassi di un oggetto javascript.
Sintassi:
var car = {type:"Ford", model:"Explorer", color:"White"};
In questo esempio, definiremo un oggetto come oggetto persona che avrà 2 coppie chiave-valore di "firstName" e "lastName".
<!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>
Spiegazione del codice:
- La direttiva ng-init viene utilizzata per definire l'oggetto persona che a sua volta ha coppie chiave-valore firstName con il valore “Guru” e la variabile lastName con il valore “99”.
- Utilizzeremo quindi le espressioni di {{person.firstName}} e {{person.secondName}} per accedere al valore di queste variabili e visualizzarle di conseguenza nella vista. Poiché le variabili membro effettive fanno parte dell'oggetto persona, devono accedervi con la notazione punto (.) per accedere al loro valore effettivo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere chiaramente che i valori di “firstName” e “secondName” vengono visualizzati sullo schermo.
Array AngularJS
Le espressioni possono essere utilizzate anche per lavorare con gli array. Diamo un'occhiata a un esempio di espressioni Angular JS con array.
In questo esempio, definiremo un array che conterrà i voti di uno studente in 3 materie. Nella vista, mostreremo di conseguenza il valore di questi segni.
<!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>
Spiegazione del codice:
- La direttiva ng-init viene utilizzata per definire l'array con il nome “marks” con 3 valori di 1, 15 e 19.
- Utilizzeremo quindi le espressioni mark [indice] per accedere a ciascun elemento dell'array.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'output si può vedere chiaramente che gli indicatori visualizzati sono definiti nell'array.
Funzionalità e limitazioni dell'espressione AngularJS
Funzionalità di espressione Angular.JS
- Le espressioni angolari sono come JavaEspressioni di script. Quindi, ha la stessa potenza e flessibilità.
- In JavaScript, quando provi a valutare proprietà indefinite, genera un ReferenceError o TypeError. In Angular, la valutazione dell'espressione è indulgente e genera un undefined o null.
- È possibile utilizzare filtri all'interno delle espressioni per formattare i dati prima di visualizzarli.
Limitazioni dell'espressione JS angolare
- Al momento non è possibile utilizzare condizionali, loop o eccezioni in un'espressione Angular
- Non puoi dichiarare funzioni in un'espressione angolare, nemmeno all'interno della direttiva ng-init.
- Non è possibile creare espressioni regolari in un'espressione angolare. Un'espressione regolare è una combinazione di simboli e caratteri, utilizzati per trovare stringhe come .*\.txt$. Tali espressioni non possono essere utilizzate all'interno delle espressioni Angular JS.
- Inoltre, non è possibile utilizzare o void in un'espressione angolare.
Differenza tra espressione e $eval
La funzione $eval consente di valutare le espressioni dall'interno del controller stesso. Pertanto, mentre le espressioni vengono utilizzate per la valutazione nella vista, $eval viene utilizzato nella funzione del controller.
Diamo un'occhiata a un semplice esempio su questo.
In questo esempio,
Utilizzeremo semplicemente la funzione $eval per aggiungere 2 numeri e renderli disponibili nell'oggetto scope in modo che possano essere mostrati nella 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>
Spiegazione del codice:
- Per prima cosa definiamo 2 variabili "a" e "b", ciascuna con un valore pari a 1.
- Stiamo utilizzando la funzione $scope.$eval per valutare l'addizione delle 2 variabili e assegnarla alla variabile scope "value".
- Quindi visualizzeremo semplicemente il valore della variabile "value" nella vista.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
L'output sopra mostra l'output dell'espressione che è stata valutata nel file controllore. I risultati precedenti mostrano che l'espressione $eval è stata utilizzata per eseguire l'aggiunta delle 2 variabili di ambito "aeb" con il risultato inviato e visualizzato nella vista.
Sommario
- Abbiamo visto come le espressioni in JS angolare può essere utilizzato per valutare regolare JavaEspressioni simili a script, come la semplice addizione di numeri.
- La direttiva ng-init può essere utilizzata per definire variabili in linea che possono essere utilizzate nella vista.
- È possibile far funzionare le espressioni con tipi primitivi come stringhe e numeri.
- Le espressioni possono essere utilizzate anche per lavorare con altri tipi come JavaOggetti script e array.
- Le espressioni in Angular JS presentano alcune limitazioni, come ad esempio non dover avere espressioni regolari o utilizzare funzioni, loop o istruzioni condizionali.
