جلسه ششم – اتصال داده ها در انگولار جی اس

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

اتصال دوطرفه


<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

<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>