اتصال داده در 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>

در داخل پاراگراف فوق ، کلمه John نمایش داده خواهد شد.
همچنین می توانید از {{}} استفاده کنید تا محتوا را از مدل نمایش دهید:

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

یا می توانید از دایرکتیو ng-model در کنترل های HTML برای اتصال model به view استفاده کنید.

دایرکتیو ng-model

از دایرکتیو ng-model برای اتصال داده ها از مدل به نمایش در کنترل های HTML استفاده می شود. (ورودی، انتخاب، متن زمینه)

<input ng-model="firstname">

 دایرکتیو ng-model یک اتصال دوطرفه بین مدل و نمایش را فراهم می کند.

اتصال دوطرفه

اتصال داده دوطرفه، اتصال داده در 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>