دوره آموزشی AngularJS به زبان فارسی - بخش چهارم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش چهارم
AngularJS Controllers
AngularJS از معماری MVC استفاده می کند و AngularJS برای کنترل برنامه از controller ها استفاده می کند.
رهنمود ng-controller برای تعریف controller ها درAngularJS به کار می رود.
کدهای درون controller ها پس از لود شدن کامل صفحه اجرا می شوند.
یک controller یک JavaScript Object است که به وسیله object constructor استاندارد ایجاد شده است.
AngularJS با یک شی scope$ فراخوانی خواهد شد.
در AngularJS، شی scope$ شی برنامه می باشد و در واقع مالک اشیا و توابع برنامه های AngularJS می باشد.
مثال
<div ng-app="" ng-controller="personController">
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>
function personController($scope) {
$scope.firstName="John",
$scope.lastName="Doe"
}
</script>
برنامه AngularJS به وسیله ng-app تعریف می شود و برنامه درون <div> اجرا می شود.
رهنمود ng-controller نام controller را مشخص میکند.
تابع personController یک تابع سازنده استاندارد JavaScript است. Controller ما یک property با نام person دارد ($scope.person) و خود شی Person دو property با نام های firstName و lastName دارد.
رهنمود ng-model کنترلهای input را با controller properties ما (firstName و lastName) مقید می کند.
Controller Methods
Controller مثال قبل یک نمونه از یک Controller بود که تنها دو پراپرتی داشت. یک Controller می تواند همچنین توابعی داشته باشد.
مثال
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
}
</script>
Controllers In External Files
در برنامه های بزرگ طبیعتا شما نمی توانید کدهای منطق برنامه خود را در صفحات بنویسید و برای جلوگیری از تکرار باید آنها در یک فایل جدا بنویسید.
کد مثال قبل را از شروع تگ <script> تا انتهای آن در یک فایل جدید با نام personController.js کپی کنید:
<div ng-app="" ng-controller="personController">
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>
مثال دیگر
برای مثال بعدی ما یک فایل Controller ایجاد کردیم.
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
حالا باید از فایل Controller خود در صفحه استفاده کنیم.
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
مثال دیگر
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<title>Index</title>
</head>
<body>
<div ng-controller="ClickController">
<input type="button" value="Click Me!" ng-click="ClickMe()" />
</div>
</body>
<script>
function ClickController($scope) {
$scope.ClickMe = function () {
alert('Hello World!');
}
}
</script>
</html>
ما با استفاده از رهنمود ng-click تعیین می کنیم وقتی کاربر بر روی این المان کلیک کرد تابع ClickMe در کنترلر اجرا شود.
مشاهده تمامی آموزش های دوره AngularJS
نظرات (۱)
با عرض سلام
از راهنمایی و دقت شما بسیار سپاسگذارم
باتشکر
{
قبل از
جا افتاده
با سپاس فراوان