Expressions AngularJS
AngularJS lie les données au HTML à l'aide d' Expressions .
Expressions AngularJS
Les expressions AngularJS peuvent être écrites à l'intérieur de doubles accolades : .{{ expression }}
Les expressions AngularJS peuvent également être écrites dans une directive : .ng-bind="expression"
AngularJS résoudra l'expression et renverra le résultat exactement là où l'expression est écrite.
Les expressions AngularJS ressemblent beaucoup aux expressions JavaScript : elles peuvent contenir des littéraux, des opérateurs et des variables.
Exemple {{ 5 + 5 }} ou {{ firstName + " " + lastName }}
Exemple
<!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>
Si vous supprimez la ng-appdirective, HTML affichera l'expression telle quelle, sans la résoudre :
Exemple
<!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>
Vous pouvez écrire des expressions où vous voulez, AngularJS résoudra simplement l'expression et renverra le résultat.
Exemple : laissez AngularJS modifier la valeur des propriétés CSS.
Modifiez la couleur de la zone de saisie ci-dessous, en modifiant sa valeur :
Exemple
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Numéros AngularJS
Les nombres AngularJS sont comme les nombres JavaScript :
Exemple
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Même exemple en utilisant ng-bind:
Exemple
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
L'utilisation ng-initn'est pas très courante. Vous apprendrez une meilleure façon d'initialiser les données dans le chapitre sur les contrôleurs.
Chaînes AngularJS
Les chaînes AngularJS sont comme les chaînes JavaScript :
Exemple
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Même exemple en utilisant ng-bind:
Exemple
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Objets AngularJS
Les objets AngularJS sont comme des objets JavaScript :
Exemple
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Même exemple en utilisant ng-bind:
Exemple
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Tableaux AngularJS
Les tableaux AngularJS sont comme des tableaux JavaScript :
Exemple
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Même exemple en utilisant ng-bind:
Exemple
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Expressions AngularJS et expressions JavaScript
Comme les expressions JavaScript, les expressions AngularJS peuvent contenir des littéraux, des opérateurs et des variables.
Contrairement aux expressions JavaScript, les expressions AngularJS peuvent être écrites dans HTML.
Les expressions AngularJS ne prennent pas en charge les conditions, les boucles et les exceptions, contrairement aux expressions JavaScript.
Les expressions AngularJS prennent en charge les filtres, contrairement aux expressions JavaScript.
Découvrez JavaScript dans notre didacticiel JavaScript .