La liaison de données (Data Binding) est une fonctionnalité très utile et puissante utilisée dans les technologies de développement logiciel. Il agit comme un pont entre la vue et la logique métier de l’application.
AngularJS suit un modèle de liaison de données bidirectionnel.
Liaison de données unidirectionnelle
La liaison de données unidirectionnelle est une approche dans laquelle une valeur est extraite du modèle de données et insérée dans un élément HTML. Il n’y a aucun moyen de mettre à jour le modèle depuis la vue. Il est utilisé dans les systèmes de gabarits classiques. Ces systèmes lient les données dans une seule direction.
Liaison de données bidirectionnelle
La liaison de données dans les applications angulaires est la synchronisation automatique des données entre les composants de modèle et de vue.
La liaison de données vous permet de traiter le modèle comme la source unique de vérité de votre application. La vue est une projection du modèle à tout moment. Si le modèle est modifié, la vue reflète le changement et inversement.
<!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='Ajeet'">
<p>Saisissez quelque chose dans la zone de saisie:</p>
<p>Nom: <input type="text" ng-model="firstName"></p>
<p>Voua avez écrit: {{ firstName }}</p>
</div>
</body>
</html>
Résultat :
Dans l’exemple ci-dessus, l’expression {{firstName}} est une expression de liaison de données AngularJS. La liaison de données dans AngularJS lie les expressions AngularJS aux données AngularJS.
{{firstName}} est lié à ng-model = "firstName".
Prenons un autre exemple où deux champs de texte sont liés avec deux directives de ng-model:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Calculateur</h2>
Quantité: <input type="number" ng-model="quantity">
Prx: <input type="number" ng-model="price">
<p><b>Total :</b> {{quantity * price}}</p>
</div>
</body>
</html>
Résultat :
