در قسمت هفتم از آموزش انگولار به بررسی کنترل‌کننده‌ها خواهیم پرداخت.
پیشنهاد می‌شود قبل از ورود به قسمت هفتم angularjs سایر قسمت‌های دوره‌ی angularjs را مطالعه فرمایید.
کنترل‌کننده‌ها
کنترل‌کننده AngularJS اطلاعات مربوط به برنامه‌های AngularJS را کنترل می‌کنند.
کنترل‌کننده‌های AngularJS به‌طور منظمشی های جاوا اسکریپت هستند.
برنامه‌های AngularJS توسط کنترل‌کننده‌ها کنترل می‌شوند.
دستورالعمل ng-controller کنترل‌کننده برنامه را تعریف می‌کند.
یک کنترل‌کننده یک شیء جاوا اسکریپت است، ایجادشده توسط یک سازنده شیء استاندارد جاوا اسکریپت.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 = "Morteza"; $scope.lastName = "Afzali"; }); </script> |
توضیحات برنامه‌ها
برنامه AngularJS توسط ng-app = “myApp” تعریف‌شده است. برنامه در داخل اجرا می‌شود.
ویژگی ng-controller = “myCtrl” یک دستور AngularJS است. این کنترل‌کننده را تعریف می‌کند.
تابع myCtrl یک تابع جاوا اسکریپت است.
AngularJS از یک کنترل‌کننده با یک شیء $scope استفاده می‌کند.
در AngularJS، $scope شیء برنامه (مالک متغیرها و توابع کاربردی) است.
کنترل‌کننده دو ویژگی (متغیر) را در دامنه (firstName and LastName) ایجاد می‌کند.
دستورالعمل‌های ng-model زمینه‌های ورودی را به خواص کنترل‌کننده (firstName and lastName) متصل می‌کند.
روش‌های کنترل
مثال بالا یک شیء کنترل‌کننده با دو ویژگی: lastName و firstName را نشان داد.
کنترل‌کننده همچنین می‌تواند روش‌ها (متغیرها به‌عنوان توابع) داشته باشد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 = "Morteza"; $scope.lastName = "Afzali"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; }; }); </script> |
کنترل‌کننده‌ها در فایل‌های خارجی
در برنامه‌های بزرگ‌تر، کنترلرها در فایل‌های خارجی معمول است.
محتویات داخل تگ < script > را داخل یک فایل خارجی به نام personContriller.js کپی کنید.
|
1 2 3 4 5 6 7 |
<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> |
مثالی دیگر درباره کنترل‌کننده در فایل‌های خارجی
برای مثال بعدی، یک فایل کنترل جدید ایجاد خواهیم کرد:
|
1 2 3 4 5 6 7 |
angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Morteza',country:'Iran'}, {name:'Sajjad',country:'Yeman'}, {name:'Poriya',country:'Sidny'} ]; }); |
کد بالا را در فایلی به نام namesController.js سیو کنید.
و سپس از فایل کنترل‌کننده د ر یک برنامه استفاده کنید:
|
1 2 3 4 5 6 7 8 9 |
<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> |
ممنون که تا انتهای این آموزش هم همراه ما بودید برای فراگیری بیشتر می‌توانید به سایت w3schools مراجعه کنید.
امیدوارم که این آموزش‌ها براتان مفید باشند.
