0
0
0
آموزش AngularJS قسمت چهارم کار با Controller ها در AngularJS
آموزش AngularJS قسمت چهارم کار با Controller ها در AngularJS
در قسمت قبلی نحوه استفاده از Directive ها در AngularJs توضیح دادیم. در این قسمت به مبحث Controller ها در AngularJs می پردازیم.
کنترلر ها در AngularJS
کنترلر ها توابع جاو اسکریپت هستند که کنترل برنامه را به دست می گیرند. و کنترلر ها قبل از اینکه صفحه لود شود اجرا می شوند.
دایرکتیو ng-controller
این دایرکتو بیانگر یک کنترلر است و یک نام تابع جاوا اسکریپت را به عنوان ورودی دریافت می کند. و این تابع جاوا اسکریپت به محض لود شدن صفحه اجرا می شود.
$scope
با استفاده از $scope می توانیم به متغیرهای که توسط AngularJS تعریف شده دسترسی پیدا کرد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
در مثال زیر که همانند مثال قبلی است با این تفاوت که یک تابع نوشتم که fullName را بر می گرداند.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.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>
در مثال زیر که همانند مثل قبلی با این تفاوت که به جای تعریف تابع، یک متغیر به نام fullName تعریف کردیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.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 =$scope.firstName + " " + $scope.lastName;
});
</script>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال