Angular : les expressions

Angular utilise les expressions pour pouvoir lier les données à la structure HTML. Les expressions seront analysées et leur valeurs va êtres écrites à l'endroit exact où elles ont été spécifiées. Il existe deux manières différentes d'écrire les expressions à savoir : 

  • entre doubles accolades : {{expression}}
  • via une directive ng-bind : ng-bind = "expression"

NB : Pour faciliter la rédaction et la compréhension dans ce tutoriel, nous allons utiliser la directive ng-init qui a pour rôle d'initialiser des variables. Ce n'est pas une pratique habituelle car il existe une meilleure façon avec les controllers que nous verrons plus tard.

Expresssions avec les nombres

Considérons ce code avec les doubles accolades : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="largeur=8;longueur=5">
        <div>Expression affichant résultat d'une addition : {{ 2 + 2 }}</div>
  		<div>La largeur multipliée à la longueur donne : {{ largeur * longueur }}</div>
	</body>
</html>

Le même code avec la directive ng-bind donnerait : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="largeur=8;longueur=5">
        <!-- ce premier exemple est juste à titre illustratif -->
        <div>Expression affichant résultat d'une addition : <span ng-bind="2 + 2"></span></div>
  		<div>La largeur multipliée à la longueur donne : <span ng-bind="largeur * longueur"></span></div>
	</body>
</html>

Pour expliquer brièvement, dans l'élément incluant la directive ng-bind, les variables seront juste remplacées par leurs valeurs (initialisées avec ng-init).

Expressions avec les chaînes de caractères

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="nom='Lookman';prenom='Design'">
  		<div>Mon nom complet est : {{ nom + ' ' + prenom}}</div>
	</body>
</html>

Avec la directive ng-bind, on a :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="nom='Lookman';prenom='Design'">
  		<div>Mon nom complet est : <span ng-bind="nom + ' ' + prenom"></span></div>
	</body>
</html>

Vous allez remarquer que les chaînes de caractères Angular sont comme les chaînes de caractères JavaScript

Expressions avec les tableaux

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="scores=[10,5,8,6,80]">
  		<div>Le 4e score est : {{ scores[3] }}</div>
	</body>
</html>

Avec ng-bind : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="scores=[10,5,8,6,80]">
  		<div>Le 4e score est : <span ng-bind="scores[3]"></span></div>
	</body>
</html>

Il faut juste se rappeler que le premier indice du tableau commence par 0.

Expressions avec les objets

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="joueur={nom:'Balo',prenom:'Ziétin'}">
  		<div>Le joueur s'appelle : {{ joueur.nom + ' '+ joueur.prenom }}</div>
	</body>
</html>

Avec ng-bind : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="joueur={nom:'Balo',prenom:'Ziétin'}">
  		<div>Le joueur s'appelle : <span ng-bind="joueur.nom + ' '+ joueur.prenom"></span></div>
	</body>
</html>

Expressions avec d'autres cas

Les expressions Angular peuvent être utilisées dans beaucoup de cas. Imaginons que vous souhaiteriez appliquer une couleur de fond rouge à votre conteneur : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<head>
	<body ng-app="" ng-init="colbg='red'">
  		<div style="background-color:{{colbg}}">un texte aléatoire</div>
	</body>
</html>

 

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .