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 một phương thức khởi 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>
Ứng dụng được giải thích:
Ứng dụng AngularJS được định nghĩa 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 với một đố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 chỉ thị ng-model ràng buộc 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 đã chứng minh một đối tượng controller 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 (biến dưới dạng 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>
Bộ điều khiển trong 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 là 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>
Một vi dụ khac
Đối với ví dụ tiếp theo, chúng tôi sẽ tạo một tệp bộ đ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 namesController.js :
Và sau đó sử dụng tệp bộ đ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>