آموزش انگولار-کنترلرها
کنترلرهای انگولار، درواقع داده های اپلیکیشن های انگولار را کنترل می کنند.
کنترلرهای انگولار، درواقع اشیاء منظم شده ی جاوااسکریپت هستند.
کنترلرهای انگولار
اپلیکیشن های انگولار، به وسیله ی کنترلرها، کنترل می شوند.
دستور ng-controller درواقع کنترلر اپلیکیشن مورد نظر را تعریف می کند.
یک کنترلر، درواقع یک شیء جاوااسکریپت می باشد که به وسیله ی یک سازنده ی شیء(object constructor) ایجاد شده است.
مثالی از انگولار
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.
یک کنترلر همچنین می تواند دارای متدهایی نیز باشد(متغیرهایی بعنوان تابع):
مثالی از انگولار
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 قرار دهید.
مثالی از انگولار
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>
مثالی دیگر
برای مثال بعدی، ما یک فایل کنترلر جدید ایجاد می کنیم:
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
فایل مورد نظر را به صورت namesController.js ذخیره کنید.
و سپس از کنترلر مورد نظر در یک اپلیکیشن استفاده کنید:
مثالی از انگولار
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
- نوشته شده توسط احسان عباسی
- بازدید: 12622
دیدگاه‌ها
دمتون گرم. خیلی خوبه.
خدا پدرتون رو بیامرزه، همیشه دعاتون می کنم، خیلی روون و ساده همه چیز رو توضیح دادید، من قبلاً از w3schools همه چیز رو می خوندم اون هم خوب بود ولی چه بهتر الان فارسیشو داریم، دمتون گرم