آموزش کار با کنترل ها در AngularJS

آموزش کار با کنترل ها در AngularJS

کنترلگرها در واقع داده‌های برنامه را مدیریت یا کنترل می‌کنند.

کنترلگرهای AngularJS همان اشیای منظم و رایج JavaScript می‌باشند. Controller ها کلاس‌های جاوا اسکریپت هستند. زمانی که کاربر با برنامه تعامل برقرار می‌کند controller پاسخگوی مستقیم دستورات کاربر می‌باشد و مدل را تغییر می‌دهد. به کنترلگرها بخش منطق برنامه نیز گفته می‌شود.

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

دستور ng- controller در حقیقت کنترلگر برنامه ی مورد نظر را تعریف می‌کند.

یک کنترلر، درواقع یک شی جاوااسکریپت است که به واسطه ی یک سازنده‌ی شی object constructo ساخته شده است.

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

تشریح برنامه ی فوق

برنامه ی مورد نظر به وسیله ی دستور یا "directive ng-app=myApp" اعلان شده است. این برنامه داخل عنصر div کار می‌کند.

خصیصه‌ی directive (دستور) AngularJS می‌باشد می‌باشد و یک کنترلگر رامشخص می‌کند.

تابع myCtrl یک تابع جاوا اسکریپت است.

AngularJS به وسیله ی شی $Scope کنترلگر مورد نظر را فرامی‌خواند.

$Scope در AngularJS ، همان شی برنامه‌ی مورد نظر می‌باشد که حاوی متغیرها و توابع برنامه می‌باشد.

کنترلگر مورد نظر، دو خاصیت (متغیر) را داخل شی scope ایجاد می‌کند(متغیرهای firstName و lastName)

دستور ng-model فیلدهای دریافت کننده‌ی ورودی را به خاصیت های کنترل مورد نظر مقید( bind) می‌کند(firstNam و lastName)

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

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"> </script> </head> <body> <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> </body> </html>

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

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

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

angular.module('myApp', []).controller('personCtrl', function ($scope) { $scope.firstName = "John" , $scope.lastName = "Doe" , $scope.fullName = function () { return $scope.firstName + " " + $scope.lastName; } }); <!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"> </script> </head> <body> <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> </body> </html>

مثال دیگر

برای مثال بعدی یک فایل کنترلگر جدید ایجاد می‌کنیم:

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

فایل مورد نظر را به این نام ذخیره کنید: namesController.js:

حال فایل کنترلگر را داخل یک برنامه بکار ببرید:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"> </script> </head> <body> <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> </body> </html>



نظرات کاربران



عبارت امنیتی : حاصل 1 × 5 می شود :
متن پیام :