Bộ điều khiển AngularJS
Bộ điều khiển AngularJS kiểm soát dữ liệu của các ứng dụng AngularJS.
Bộ điều khiển AngularJS là các Đối tượng JavaScript thông thường.
Bộ điều khiển AngularJS
Các ứng dụng AngularJS được điều khiển bởi bộ điều khiển.
Lệnh ng-controller xác định bộ điều khiển ứng dụng.
Bộ điều khiển là một Đối tượng JavaScript , được tạo bởi hàm tạo đối tượng JavaScript tiêu chuẩn.
Ví dụ về AngularJS
<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>
Hãy tự mình thử »Ứng dụng giải thích:
Ứng dụng AngularJS được xác định bởi ng-app="myApp" . Ứng dụng chạy bên trong <div>.
Thuộc tính ng-controller="myCtrl" là một chỉ thị AngularJS. Nó định nghĩa một bộ điều khiển.
Hàm myCtrl là một hàm JavaScript.
AngularJS sẽ gọi bộ điều khiển bằng đối tượng $scope .
Trong AngularJS, $scope là đối tượng ứng dụng (chủ sở hữu của các biến và hàm ứng dụng).
Bộ điều khiển tạo hai thuộc tính (biến) trong phạm vi ( firstName và LastName ).
Các lệnh ng-model liên kết các trường đầu vào với các thuộc tính của bộ điều khiển (FirstName và LastName).
Phương pháp điều khiển
Ví dụ trên minh họa một đối tượng điều khiển có hai thuộc tính: LastName và FirstName.
Một bộ điều khiển cũng có thể có các phương thức (các biến là hàm):
Ví dụ về AngularJS
<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>
Hãy tự mình thử »Bộ điều khiển trong các tệp bên ngoài
Trong các ứng dụng lớn hơn, người ta thường lưu trữ bộ điều khiển trong các tệp bên ngoài.
Chỉ cần sao chép mã giữa các thẻ <script> vào một tệp bên ngoài có tên PersonController.js :
Ví dụ về AngularJS
<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>
Hãy tự mình thử »Một vi dụ khac
Đối với ví dụ tiếp theo, chúng tôi sẽ tạo một tệp điều khiển mới:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Lưu tệp dưới dạng nameController.js :
Và sau đó sử dụng tệp điều khiển trong một ứng dụng:
Ví dụ về AngularJS
<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>
Hãy tự mình thử »