کنترلرها (Controllers)

کنترلرهای AngularJS یعنی مدیرهای داده. «کنترلر (Controller)» منطق را اجرا می کند. «اسکوپ ($scope)» ظرف متغیرهاست. نما فقط نمایش می دهد. مثل معلم که درس می دهد و تخته می نویسد.

تعریف کنترلر و ng-controller

برنامه با ng-app مشخص می شود. کنترلر با ng-controller وصل می شود.

<div ng-app="myApp" ng-controller="myCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  Full Name: {{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = 'John';
  $scope.lastName = 'Doe';
});
<\/script>

مشاهده در ادیتور

متدهای کنترلر

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

<div ng-app="myApp" ng-controller="personCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  Full Name: {{ fullName() }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = 'John';
  $scope.lastName = 'Doe';
  $scope.fullName = function() {
    return $scope.firstName + ' ' + $scope.lastName;
  };
});
<\/script>

مشاهده در ادیتور

کنترلر در فایل خارجی

در پروژه های بزرگ، کد کنترلر را جدا ذخیره کن. سپس اسکریپت را وارد کن.

<div ng-app="myApp" ng-controller="personCtrl">
  Full Name: {{ fullName() }}
</div>
<script src="personController.js"><\/script>

مشاهده در ادیتور

نمونه فهرست با ng-repeat

کنترلر آرایه ای از اشیا می دهد. نما با ng-repeat لیست می سازد.

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    { name: 'Jani', country: 'Norway' },
    { name: 'Hege', country: 'Sweden' },
    { name: 'Kai', country: 'Denmark' }
  ];
});

مشاهده در ادیتور

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>
</div>
<script src="namesController.js"><\/script>

مشاهده در ادیتور

گام های عملی

1. یک ماژول با angular.module بساز.
2. یک کنترلر تعریف کن و $scope تزریق کن.
3. متغیرها و متدها را روی $scope تنظیم کن.
4. در نما از ng-controller و ng-model استفاده کن.

نکته: برای ادامه کار با اتصال داده و اسکوپ ها همین مسیر را دنبال کن.

جمع بندی سریع

• ng-controller کنترلر را به نما وصل می کند.
• $scope ظرف داده و توابع است.
• می توان کنترلر را در فایل جدا نوشت.
• ng-repeat فهرست را از آرایه می سازد.