Cosa sono le espressioni JS angolari?
Le espressioni sono variabili che sono state definite nelle doppie parentesi graffe {{}}. Sono molto comunemente usati all'interno di Angular JS e li vedresti nei nostri tutorial precedenti.
In questo tutorial imparerai-
- Spiega le espressioni Angular.js con l'esempio
- Numeri AngularJS
- Stringhe AngularJS
- Oggetti AngularJS
- AngularJS Arrays
- Capacità e limitazioni di AngularJS Expression
- La differenza tra le espressioni e $ eval
Spiega Angular.js Expressions con un esempio
Le espressioni AngularJS sono quelle scritte all'interno di doppie parentesi graffe {{espressione}}.
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 a un esempio di espressioni Angular.JS.
In questo esempio, vogliamo solo mostrare una semplice aggiunta di numeri come espressione.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Spiegazione del codice:
- La direttiva ng-app nel nostro esempio è vuota come mostrato nella schermata sopra. Ciò significa solo che non esiste alcun modulo per assegnare controllori, direttive, servizi allegati al codice.
- Stiamo aggiungendo una semplice espressione che guarda all'aggiunta di 2 numeri.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere che avviene la somma dei due numeri 9 e 6 e viene visualizzato il valore aggiunto di 15.
Numeri Angular.JS
Le espressioni possono essere utilizzate anche per lavorare con i numeri. Diamo un'occhiata a 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.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Spiegazione del codice:
- La direttiva ng-init viene utilizzata in angular.js per definire le variabili e i valori corrispondenti nella vista stessa. È un po 'come definire variabili locali da codificare in qualsiasi linguaggio di programmazione. In questo caso, stiamo definendo 2 variabili chiamate margine e profitto e assegnando loro dei valori.
- Stiamo quindi utilizzando le 2 variabili locali e moltiplicando i loro valori.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
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 a un esempio di espressioni JS angolari con stringhe.
In questo esempio, definiremo 2 stringhe di "firstName" e "lastName" e le visualizzeremo utilizzando le espressioni di conseguenza.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
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".
- Stiamo quindi utilizzando 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, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'output, si può vedere chiaramente che i valori di firstName e lastName vengono visualizzati sullo schermo.
Oggetti Angular.JS
Le espressioni possono essere utilizzate anche per lavorare con oggetti JavaScript.
Diamo un'occhiata a 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 un oggetto persona che avrà 2 coppie di valori chiave "firstName" e "lastName".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Spiegazione del codice:
- La direttiva ng-init viene utilizzata per definire l'oggetto persona che a sua volta ha coppie di valori chiave firstName con il valore "Guru" e la variabile lastName con il valore "99".
- Stiamo quindi utilizzando 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, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere chiaramente che i valori di "firstName" e "secondName" vengono visualizzati sullo schermo.
AngularJS Arrays
Le espressioni possono essere utilizzate anche per lavorare con gli array. Diamo un'occhiata a un esempio di espressioni JS angolari con array.
In questo esempio, definiremo un array che conterrà i voti di uno studente in 3 materie. Nella vista, mostreremo il valore di questi segni di conseguenza.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Spiegazione del codice:
- La direttiva ng-init viene utilizzata per definire l'array con il nome "mark" con 3 valori di 1, 15 e 19.
- Quindi stiamo usando espressioni di mark [index] per accedere a ogni elemento dell'array.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'output si può vedere chiaramente che i segni visualizzati sono definiti nella matrice.
Capacità e limitazioni di AngularJS Expression
Capacità di espressione Angular.JS
- Le espressioni angolari sono come le espressioni JavaScript. Quindi, ha la stessa potenza e flessibilità.
- In JavaScript, quando si tenta di valutare proprietà non definite, viene generato un ReferenceError o TypeError. In Angular, la valutazione dell'espressione è indulgente e genera un valore non definito o nullo.
- È possibile utilizzare filtri all'interno di espressioni per formattare i dati prima di visualizzarli.
Limitazioni dell'espressione JS angolare
- Al momento non è possibile utilizzare condizionali, cicli o eccezioni in un'espressione angolare
- Non è possibile dichiarare funzioni in un'espressione angolare, anche 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 di espressioni JS angolari.
- Inoltre, non è possibile utilizzare o annullare in un'espressione angolare.
Differenza tra espressione e $ eval
La funzione $ eval consente di valutare le espressioni dall'interno del controller stesso. Quindi, mentre le espressioni vengono utilizzate per la valutazione nella vista, $ eval viene utilizzato nella funzione controller.
Diamo un'occhiata a un semplice esempio su questo.
In questo esempio,
Useremo solo la funzione $ eval per aggiungere 2 numeri e renderlo disponibile nell'oggetto scope in modo che possa essere mostrato nella vista.
Event Registration Guru99 Global Event
{{value}}
Spiegazione del codice:
- Per prima cosa definiamo 2 variabili "a" e "b", ciascuna contenente un valore 1.
- Stiamo usando la funzione $ scope. $ Eval per valutare l'aggiunta delle 2 variabili e assegnarla alla variabile di ambito 'value'.
- Quindi stiamo solo visualizzando il valore della variabile "valore" nella vista.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
L'output sopra mostra l'output dell'espressione che è stata valutata nel controller. 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 Angular JS possono essere utilizzate per valutare espressioni simili a JavaScript come la semplice aggiunta di numeri.
- La direttiva ng-init può essere utilizzata per definire variabili in linea che possono essere utilizzate nella vista.
- È possibile fare in modo che le espressioni funzionino con tipi primitivi come stringhe e numeri.
- Le espressioni possono essere utilizzate anche per lavorare con altri tipi come oggetti e array JavaScript.
- Le espressioni in Angular JS hanno alcune limitazioni come ad esempio non avere espressioni regolari o utilizzare funzioni, cicli o istruzioni condizionali.