کنترلر های AngularJS داده های  برنامه AngularJS را کنترل می کنند.

کنترلر های AngularJS ، اشیای JavaScript هستند.

کنترلر های AngularJS

برنامه های AngularJS توسط کنترلر ها ، کنترل می شوند.

دستور ng-controller یک کنترلر را به برنامه نعریف می کند.

کنترلر یک شی JavaScript است که بصورت استاندارد از طریق سازنده اشیای JavaScript ایجاد می شود.

<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>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script> 

توضیح برنامه :

برنامه AngularJS توسط ng-app="myApp" تعریف می شود. برنامه در درون یک تگ <div> اجرا می شود.

ng-controller="myCtrl" یک دستور AngularJS می باشد که کنترلر برنامه را تعریف میکند.

تابع myCtrl یک تابع JavaScript است.

با استفاده از AngularJS کنترلر با شی $scope  صدا زده می شود.

در AngularJS  شی $scope مالک متغیر ها و متدهای برنامه می باشد.

کنترلر دو مشخصه در محدودع برنامه ایجاد می کند. (firstName    و lastName ).

دستور ng-model مفادیر ورودی را به متغیر های firstName و lastName  می چسباند.

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

مثال بالا یک شی کنترلر را تعریف می کند که دارای دو متغیر firstName و lastName می باشد.

یک کنترلر می تواند دارای متد باشد. ( متغیر ها و توابع ) :

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

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

متداول است که در برنامه های بزرگتر کنترلر ها را در یک فایل خارجی مجزا ذخیره می کنند.

فقط کافیست کد های داخل تگ <script> را کپی کنید به درون فایل personController.js و آن را درون صفحه HTML فراخوانی کنید.

<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>
<br>
Full Name: {{fullName()}}

</div>

<script src="personController.js"></script> 

مثالی دیگر

برای مثال بعدی ما یک فایل کنترلر ایجاد کردیم  که محتوای آن به شکل زیر است :

فایل را با نام namesController.js ذخیره می کنیم :
و سپس از این فایل کنترلر در برنامه استفاده می کنیم :

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