اتصال داده در AngularJS به معنای هماهنگ سازی بین مدل و دیدگاه است.
مدل داده
برنامه های AngularJS معمولا یک مدل داده ای دارند که مدل داده ها، مجموعه ای از اطلاعات موجود برای برنامه می باشد. مثال زیر یک نمونه از مدل داده ها را نشان می دهد:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
نمایش HTML
ظرف HTML جایی است که که در آن برنامه AngularJS نمایش داده می شود و View (نمایش) نامیده می شود.
این view به مدل دسترسی دارد و روش های متعددی برای نمایش داده های مدل در view وجود دارد.
شما می توانید از دایرکتیو ng-bind استفاده کنید که innerHTML عنصر را به یک خاصیت مدل مشخص شده مرتبط می کند:
<p ng-bind="firstname"></p>
<p>First name: {{firstname}}</p>
دایرکتیو ng-model
<input ng-model="firstname">
اتصال دوطرفه
اتصال داده دوطرفه، اتصال داده در AngularJS هماهنگ سازی بین مدل و نمایش است.
هنگامی که داده ها در مدل تغییر می کنند، view در نمایشگر تغییر را نشان می دهد و هنگامی که داده ها در رهثص تغییر می کنند، مدل نیز به روز می شود. این بلافاصله و به طور خودکار اتفاق می افتد، که اطمینان حاصل می کند که مدل و نمایش در همه زمان ها به روز می شود.
<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>
کنترلر 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 = "John";
$scope.changeName = function() {
$scope.firstname = "Nelly";
}
});
</script>