Dans AngularJS, les expressions sont utilisées pour lier les données d’application au HTML. AngularJS résout l’expression et renvoie le résultat exactement à l’endroit où l’expression est écrite.
Les expressions sont écrites entre doubles accolades {{expression}}. Elles peuvent également être écrites dans une directive:
ng-bind="expression".
Les expressions AngularJS sont très similaires aux expressions JavaScript. Ils peuvent contenir des littéraux, des opérateurs et des variables. Par exemple:
{{ 5 + 5 }} or {{ firstName + " " + lastName }}
Exemple d’Expressions AngularJS
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app>
<p>Exemple d'expression simple: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Résultat :
Exemple d'expression simple: 10
Remarque: Si vous supprimez la directive « ng-app », HTML affichera l’expression sans la résoudre.
Voir cet exemple:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Si vous supprimez la directive "ng-app", HTML affichera l'expression sans la résoudre.</p>
<div>
<p>Exemple d,expression simple: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Résultat :
Si vous supprimez la directive "ng-app", HTML affichera l'expression sans la résoudre. Exemple d,expression simple: 10
Vous pouvez également écrire des expressions où vous le souhaitez. AngularJS résoudra l’expression et renverra le résultat.
Prenons un exemple pour changer la couleur de la zone de saisie en modifiant sa valeur.
Voir cet exemple:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Changer la valeur du champ de saisie:</p>
<div ng-app="" ng-init="myCol='pink'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
<p>AngularJS résout l'expression et renvoie le résultat. </P>
<p> La couleur de fond de la zone de saisie sera celle que vous écrivez dans le champ de saisie.</p>
</body>
</html>
Résultat :
AngularJS Les Nombers
Les nombres de AngularJS sont similaires aux nombres de JavaScript.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=5;cost=5">
<p>Total en dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
Résultat :
Total en dollar: 25
AngularJS les chaines de caractères
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='Raefskov';lastName='Ghri'">
<p>Mon nom est: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
Résultat :
Mon nom est: Raefskov Ghri
AngularJS les objets
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="person={firstName:'Raefskov',lastName:'Ghri'}">
<p>Mon nom est {{ person.firstName }}</p>
</div>
</body>
</html>
Résultat :
Mon nom est Raefskov
Même exemple avec ng-bind:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="person={firstName:'Raefskov',lastName:'Ghri'}">
<p>Mon nom est <span ng-bind="person.firstName"></span></p>
</div>
</body>
</html>
AngularJS les tableaux
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Résultat num 1 : {{ points[0] }}</p>
</div>
</body>
</html>
Résultat :
Résultat num 1 : 1
Même exemple avec ng-bind:
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>Résultat num 1 : <span ng-bind="points[0]"></span></p> </div> </body> </html>
Différence entre les expressions AngularJS et les expressions JavaScript:
- Les expressions AngularJS peuvent être écrites en HTML, contrairement aux expressions JavaScript.
- Les expressions AngularJS prennent en charge les filtres, contrairement aux expressions JavaScript.
- Les expressions AngularJS ne prennent pas en charge les conditions, les boucles et les exceptions, contrairement aux expressions JavaScript.
Similarité entre les expressions AngularJS et les expressions JavaScript:
Les expressions AngularJS et JavaScript peuvent contenir des littéraux, des opérateurs et des variables.