AngularJS: Controller trong AngularJS


Đăng ký nhận thông báo về những video mới nhất

Các controller trong AngularJS có nhiệm vụ kiểm soát dữ liệu của các ứng dụng AngularJS.

Controller là đối tượng JavaScript thông thường.

Controller

Các ứng dụng AngularJS được điều khiển bởi các controller.

Chỉ thị ng-controller định nghĩa controller của ứng dụng.

Controller là một đối tượng JavaScript, được tạo bởi một hàm tạo đối tượng JavaScript chuẩn.

Ví dụ

<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>

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 thẻ <div>.

Thuộc tính ng-controller = "myCtrl" là một chỉ thị AngularJS. Nó định nghĩa một controller.

Hàm myCtrl là một hàm JavaScript.

AngularJS sẽ gọi controller với đối tượng $scope.

Trong AngularJS, $scope là đối tượng ứng dụng (chủ sở hữu các biến ứng dụng và các hàm).

Controller tạo ra hai thuộc tính (biến) là firstName và lastName.

Chỉ thị ng-model liên kết các trường đầu vào với các thuộc tính của controller (firstName và lastName).

Các phương thức của controller

Ví dụ trên minh họa một đối tượng controller với hai thuộc tính: lastName và firstName.

Một controller cũng có thể có các phương thức (các biến dưới dạng các hàm):

Ví dụ

<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>

Controller trong các file ngoài

Trong các ứng dụng lớn hơn thì các controller được lưu trữ trong các tập tin bên ngoài.

Dưới đây là ví dụ trong đó các controller được lưu trong file personController.js :

Ví dụ

<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 ví dụ khác

Trong ví dụ tiếp theo, chúng ta sẽ tạo một file controller 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 file với tên namesController.js :

Và sau đó sử dụng tập tin điều khiển trong một ứng dụng.

Ví dụ

<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>

Đăng ký nhận thông báo về những video mới nhất
« Prev: AngularJS: Data Binding trong AngularJS
» Next: AngularJS: Scope trong AngularJS
Copied !!!