Liaison de données AngularJS
La liaison de données dans AngularJS est la synchronisation entre le modèle et la vue.
Modèle de données
Les applications AngularJS ont généralement un modèle de données. Le modèle de données est un ensemble de données disponibles pour l'application.
Exemple
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Affichage HTML
Le conteneur HTML dans lequel l'application AngularJS est affichée s'appelle la vue.
La vue a accès au modèle et il existe plusieurs manières d'afficher les données du modèle dans la vue.
Vous pouvez utiliser la ng-binddirective, qui liera le innerHTML de l'élément à la propriété de modèle spécifiée :
Exemple
<p ng-bind="firstname"></p>
Vous pouvez également utiliser des accolades doubles pour afficher le contenu du modèle :{{ }}
Exemple
<p>First name: {{firstname}}</p>
Ou vous pouvez utiliser la ng-modeldirective sur les contrôles HTML pour lier le modèle à la vue.
La ng-modelDirective
Utilisez la ng-modeldirective pour lier les données du modèle à la vue sur les contrôles HTML (input, select, textarea)
Exemple
<input ng-model="firstname">
La ng-modeldirective fournit une liaison bidirectionnelle entre le modèle et la vue.
Liaison bidirectionnelle
La liaison de données dans AngularJS est la synchronisation entre le modèle et la vue.
Lorsque les données du modèle changent, la vue reflète le changement, et lorsque les données de la vue changent, le modèle est également mis à jour. Cela se produit immédiatement et automatiquement, ce qui garantit que le modèle et la vue sont mis à jour à tout moment.
Exemple
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
Contrôleur AngularJS
Les applications dans AngularJS sont contrôlées par des contrôleurs. Lisez à propos des contrôleurs dans le chapitre Contrôleurs AngularJS .
En raison de la synchronisation immédiate du modèle et de la vue, le contrôleur peut être complètement séparé de la vue et se concentrer simplement sur les données du modèle. Grâce à la liaison de données dans AngularJS, la vue reflétera toutes les modifications apportées au contrôleur.
Exemple
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>