AngularJS lega i dati in HTML usando espressioni.
AngularJS Espressioni
AngularJS espressioni possono essere scritti tra doppie parentesi graffe: {{ expression }} .
AngularJS espressioni possono anche essere scritte all'interno di una direttiva: ng-bind=" expression " .
AngularJS risolveranno l'espressione, e restituire il risultato esattamente dove l'espressione è scritto.
AngularJS espressioni sono molto simili espressioni JavaScript: Possono contenere letterali, operatori e variabili.
Esempio {{5 + 5}} o {{firstName + "" + lastName}}
Esempio
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Prova tu stesso " Se si rimuove il ng-app direttiva, HTML verrà visualizzato l'espressione così com'è, senza risolverlo:
Esempio
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Prova tu stesso " È possibile scrivere espressioni dove si vuole, AngularJS sarà semplicemente risolvere l'espressione e restituire il risultato.
Esempio: Lasciate AngularJS modificare il valore della proprietà CSS.
Cambiare il colore della casella di input di seguito, cambiando il suo valore:
Esempio
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
Prova tu stesso " I numeri AngularJS
AngularJS numeri sono come i numeri JavaScript:
Esempio
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Prova tu stesso " 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>
Prova tu stesso "  | Utilizzando ng-init non è molto comune. Imparerete un modo migliore per inizializzare i dati nel capitolo sui controller. |
|---|
AngularJS Strings
AngularJS stringhe sono come stringhe JavaScript:
Esempio
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Prova tu stesso " 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>
Prova tu stesso " Oggetti AngularJS
AngularJS oggetti sono come oggetti JavaScript:
Esempio
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Prova tu stesso " 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>
Prova tu stesso " AngularJS Array
AngularJS array 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>
Prova tu stesso " 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>
Prova tu stesso " AngularJS Espressioni vs. JavaScript Espressioni
Come espressioni JavaScript, AngularJS espressioni possono contenere letterali, operatori e variabili.
A differenza di espressioni JavaScript, AngularJS espressioni possono essere scritti all'interno HTML.
AngularJS espressioni non supportano condizionali, cicli, e le eccezioni, mentre le espressioni JavaScript fanno.
AngularJS espressioni supporta i filtri, mentre le espressioni JavaScript non lo fanno.