در این آموزش نحوه کار با کنترلرها در نرم افزار های انگولار را مورد بحث قرار داده ایم.
کنترلرها در آنگولار داده های نرم افزار را کنترل می کنند.
کنترل های آنگولار اشیاء جاوا اسکریپت هستند.
کنترلرهای آنگولار
نرم افزار آنگولار با کنترلرها کنترل میگردد.
دستورالعمل ng-controller کنترلرهای نرم افزار را تعریف می کند.
یک کنترلر یک شیئ جاوا اسکریپت است ، که با یک سازنده شیئ در جاوا کنترل میشود.
<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 اتصال بین فیلد input را با ویژگی کنترلر(firstName and lastName) را فراهم میاورد.
متد کنترلر
مثال بالا یک شیئ کنترل را با دو متغیر یا همان ویژگی بصورت lastName and firstName توضیح داد.
یک کنترلر میتواند متدهایی هم داشته باشد.(متغیر را مانند عملگر استفاده کند)
مثال:
<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 گذاشتیم . نام فایل را میتوان تغییر داد ولی پسوند باید .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: {{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 ذخیره کرده ایم.
حالا از این فایل در یک نرم افزار استفاده می کنیم:
<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>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت با شرکت سارگون تماس بگيريد.