در برنامه AngularJS هماهنگی بین Model و View وجود دارد و بطور همزمان کار میکنند.

مدل داده ای

معمولا برنامه های AngularJS یک مدل داده ای دارند و این مدل داده ای مجموعه هایی از داده های در دسترس برای برنامه می باشد.

View کد های HTML در AngularJS

نمایش برنامه AngularJS توسط HTML صورت می گیرد که View نام دارد.

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

شما می توانید از دستور  ng-bind برای نمایش داده ها در صفحات HTML استفاده کنید.

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

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

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

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

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

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

 <input ng-model="firstname"> 

دستور یک رابطه دو طرفه بین model و view فراهم می آورد.

مقدار دهی دو طرفه

مقداری دهی داده ها در AngularJS بین مدل و view بصورت همزمان کار می کند.

زمانی که داده ها در مدل تغییر کنند ، در view هم بصورت خودکار تغییر می کنند و همچین داده ها وقتی در view تغییر میکنند ، در مدل بلافاصله بروزرسانی می شوند.

این اتفاق بصورت آنی و اتوماتیک انجام می شود ، بطوریکه در همه زمان ها مدل و 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 توسط کنترلر ها (controller)  کنترل می شوند.  در رابطه با کنترل ها در درس کنترلر ها بصورت کامل آشنا خواهید شد.

بدلیل هماهنگی آنی view و مدل ، کنترلر ها کاملا جدا از view هستند و بر روی مدل متمرکز هستند.پس بنابرین کنترلر ها هر تغییری روی مدل ایجاد کنند ، view نیز تاثیر می پذیرد.

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