پیوند داده‌های AngularJS

پیوند داده‌های AngularJS، هماهنگی بین مدل و ویو است.

مدل داده

برنامه‌های AngularJS معمولاً یک مدل داده دارند. مدل داده مجموعه‌ای از داده‌هایی است که برای برنامه قابل استفاده هستند.

مثال

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

ویو HTML

قالب HTML برای برنامه‌های AngularJS به عنوان ویو شناخته می‌شود.

ویو می‌تواند به مدل دسترسی داشته باشد و چندین روش برای نمایش داده‌های مدل در ویو وجود دارد.

شما می‌توانید ng-bind دستورالعمل، که innerHTML عناصر را به مدل خاصی پیوند می‌دهد:

مثال

<p ng-bind="firstname"></p>

خودتان امتحان کنید

شما همچنین می‌توانید از دو قفل بزرگ‌تر استفاده کنید {{ }} برای نمایش محتوای مدل استفاده کنید:

مثال

<p>First name: {{firstname}}</p>

خودتان امتحان کنید

یا، شما می‌توانید در کنترل‌های HTML از ng-model دستورالعمل پیوند مدل به ویو را انجام می‌دهد.

دستورالعمل ng-model

استفاده از ng-model دستورالعمل پیوند داده‌های مدل را به ویو HTML کنترل‌های (input, select, textarea) می‌بندد.

مثال

<input ng-model="firstname">

خودتان امتحان کنید

ng-model دستورالعمل‌ها پیوند دوطرفه بین مدل و ویو را فراهم می‌کنند.

پیوند دوطرفه

پیوند داده‌های AngularJS، هماهنگی بین مدل و ویو است.

وقتی داده‌های مدل تغییر می‌کنند، ویو این تغییرات را منعکس می‌کند و همچنین وقتی داده‌های ویو تغییر می‌کنند، مدل به‌روزرسانی می‌شود. این به صورت آنی و خودکار انجام می‌شود و اطمینان حاصل می‌کند که مدل و ویو همیشه به‌روز هستند.

مثال

<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 = "Bill";
  $scope.lastname = "Gates";
});
</script>

خودتان امتحان کنید

کنترل‌های AngularJS

برنامه‌های AngularJS توسط کنترلر کنترل می‌شوند. لطفاً در فصل کنترلرهای AngularJS مطالب مربوط به کنترلر را بخوانید.

به دلیل هماهنگی آنی مدل و ویو، کنترلر می‌تواند کاملاً از ویو جدا شود و فقط بر روی داده‌های مدل تمرکز کند. به دلیل پیوند داده‌های AngularJS، ویو تغییرات انجام شده در کنترلر را منعکس می‌کند.

مثال

<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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

خودتان امتحان کنید