سبد (0)

آموزش انگولار-کنترلرها

کنترلرهای انگولار، درواقع داده های اپلیکیشن های انگولار را کنترل می کنند. 

کنترلرهای انگولار، درواقع اشیاء منظم شده ی جاوااسکریپت هستند. 


کنترلرهای انگولار

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

دستور ng-controller درواقع کنترلر اپلیکیشن مورد نظر را تعریف می کند. 

یک کنترلر، درواقع یک شیء جاوااسکریپت می باشد که به وسیله ی یک سازنده ی شیء(object constructor) ایجاد شده است.

مثالی از انگولار

<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>
خودتان امتحان کنید »

توضیح اپلیکیشن بالا:

اپلیکیشن مورد نظر به وسیله ی دستور "ng-app="myApp  تعریف شده است. این اپلیکیشن درون عنصر <div> کار می کند. 

خصوصیت "ng-controller="myCtrl یک دستور انگولار می باشد و یک کنترلر را مشخص می کند. 

تابع myCtrl درواقع یک تابع جاوا اسکریپت می باشد. 

انگولار درواقع با استفاده از یک شیء scope$ کنترلر مورد نظر را فراخوانی خواهد نمود. 

scope$ در انگولار، درواقع همان شیء اپلیکیشن مورد نظر می باشد(که دربردارنده ی متغیرها و توابع اپلیکیشن می باشد).

کنترلر مورد نظر، دو خصوصیت(متغیر) را در 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 قرار دهید.

مثالی از انگولار

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

</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 ذخیره کنید. 

و سپس از کنترلر مورد نظر در یک اپلیکیشن استفاده کنید:

مثالی از انگولار

<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>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه