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

98 lượt xem

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: lastNamefirstName. 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.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz