Espressioni AngularJS
AngularJS lega i dati all'HTML usando Expressions .
Espressioni AngularJS
Le espressioni AngularJS possono essere scritte tra parentesi doppie: .{{ expression }}
Le espressioni AngularJS possono anche essere scritte all'interno di una direttiva: .ng-bind="expression"
AngularJS risolverà l'espressione e restituirà il risultato esattamente dove è scritta l'espressione.
Le espressioni AngularJS sono molto simili alle espressioni JavaScript: possono contenere valori letterali, operatori e variabili.
Esempio {{ 5 + 5 }} o {{ firstName + " " + lastName }}
Esempio
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Se rimuovi la ng-appdirettiva, HTML visualizzerà l'espressione così com'è, senza risolverla:
Esempio
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Puoi scrivere espressioni dove vuoi, AngularJS risolverà semplicemente l'espressione e restituirà il risultato.
Esempio: lascia che AngularJS modifichi il valore delle proprietà CSS.
Cambia il colore della casella di input sottostante, modificandone il valore:
Esempio
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Numeri AngularJS
I numeri AngularJS sono come i numeri JavaScript:
Esempio
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Stesso esempio usando ng-bind:
Esempio
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
L'uso ng-initnon è molto comune. Imparerai un modo migliore per inizializzare i dati nel capitolo sui controller.
Corde AngularJS
Le stringhe AngularJS sono come le stringhe JavaScript:
Esempio
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Stesso esempio usando ng-bind:
Esempio
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Oggetti AngularJS
Gli oggetti AngularJS sono come gli oggetti JavaScript:
Esempio
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Stesso esempio usando ng-bind:
Esempio
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Array di AngularJS
Gli array AngularJS sono come gli array JavaScript:
Esempio
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Stesso esempio usando ng-bind:
Esempio
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Espressioni AngularJS vs Espressioni JavaScript
Come le espressioni JavaScript, le espressioni AngularJS possono contenere valori letterali, operatori e variabili.
A differenza delle espressioni JavaScript, le espressioni AngularJS possono essere scritte all'interno di HTML.
Le espressioni AngularJS non supportano condizionali, loop ed eccezioni, mentre le espressioni JavaScript lo fanno.
Le espressioni AngularJS supportano i filtri, mentre le espressioni JavaScript no.
Ulteriori informazioni su JavaScript nel nostro tutorial JavaScript .