[AngularJS] Phần 7: Các điều khiển trong AngularJS

Các điều khiển AngularJS là các đối tượng JavaScript, kiểm soát dữ liệu của các ứng dụng.

Các điều khiển AngularJS
Chỉ thị ng-controller định nghĩa điều khiển ứng dụng. Một điều khiển được bởi 1 khởi tạo đối tượng JavaScript chuẩn.

<div ng-app="myApp" ng-controller="myCtrl">

Tên: <input type="text" ng-model="firstName"><br>
Họ: <input type="text" ng-model="lastName"><br>
<br>
Tên đầy đủ: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Dammio";
    $scope.lastName = "Ta";
});
</script>

Trong ví dụ trên, ứng dụng được định nghĩa bởi ng-app=”myApp” và ứng dụng chạy bên trong thẻ <div>. Thuộc tính ng-controller=”myCtrl” là 1 chỉ thị định nghĩa cho 1 controller. Hàm myCtrl là 1 hàm JavaScript.

AngularJS sẽ gọi điều khiển với 1 đối tượng $scope. Trong AngularJS, $scope là 1 đối tượng ứng dụng (sở hữu các biến và hàm của ứng dụng). Điều khiển tạo 2 thuộc tính trong scope (firstName và lastName).

Chỉ thị ng-model trói các trường đầu vào (input) với các thuộc tính controller (firstName và lastName).

Các phương thức điều khiển
Ví dụ trên mô tả 1 đối tượng điều khiển với 2 thuộc tính: lastName và firstName. Một điều khiển cũng có các phương thức (các biến như hàm).

<div ng-app="myApp" ng-controller="personCtrl">

Tên: <input type="text" ng-model="firstName"><br>
Họ: <input type="text" ng-model="lastName"><br>
<br>
Tên đầy đủ: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Dammio";
    $scope.lastName = "Ta";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});

Các điều khiển trong tập tin ngoài
Trong các ứng dụng lớn, việc lưu trữ các điều khiển ở các tập tin ngoài là rất phổ biến. Để thực hiện, chúng ta chỉ cần sao chép đoạn mã giữa thẻ <script> vào 1 tập tin nào đó đặt tên là dammioController.js, sau đó nhúng vào ứng dụng như ví dụ sau.

<div ng-app="myApp" ng-controller="personCtrl">
Tên: <input type="text" ng-model="firstName"><br>
Họ: <input type="text" ng-model="lastName"><br>
<br>
Tên đầy đủ: {{fullName()}}
</div>
<script src="dammioController.js"></script>

Nội dung tập tin dammioController.js như sau:

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Dammio";
    $scope.lastName = "Ta";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});

Kết luận: như vậy trong bài này, các bạn đã học về các điều khiển trong AngularJS.