کنترلر های AngularJS

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

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

کنترلر های AngularJS

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

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

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

کنترلر های AngularJS
<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 می باشد.

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

کنترلر های AngularJS
 <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 فراخوانی کنید.

کنترلر های AngularJS
<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> 
مشاهده مثال

مثالی دیگر

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

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

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

کنترلر های AngularJS
 <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> 
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط