AngularJS controller là gì

AngularJS controller kiếm soát dữ liệu trong ứng dụng AngularJS

AngularJS controller tương tự với một đối tượng (object) trong Javascript

AngularJS application và AngularJS controller

Ứng dụng AngularJS (AngularJS application) được quản lý bởi AngularJS controller. AngularJS controller kiểm soát luồng chạy của một ứng dụng AngularJS.

Để định nghĩa controller trong ứng dụng AngularJS chúng ta sử dụng chỉ thị ng-controller.

Một controller trong AngularJS chính là 1 đối tượng JavaScript (JavaScript object) và cách khởi tạo một controller giống cách khởi tạo đối tượng.

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

<p>Họ: <input type="text" ng-model="firstName"><p>
<p>Tên: <input type="text" ng-model="lastName"><p>
<p>Họ và tên: {{firstName + " " + lastName}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Trần Văn";
    $scope.lastName = "Tí";
});
</script>

Giải thích ví dụ trên:

Ứng dụng AngularJS được định nghĩ sử dụng chỉ thị ng-app="myApp" đặt trong thẻ <div>

Tiếp theo chúng ta tạo một controller trong ứngd ụng AngularJS sử dụng chỉ thị ng-controller="myCtrl"

Hàm myCtrl chính là 1 hàm JavaScript.

AngularJS sẽ gọi controller sử dụng đối tượng $scope.

Trong AngularJS, $scope là 1 đối tượng của application (application object). Đối tượng ứng dụng chứa các thông tin của ứng dụng như giá trị của biến, các hàm...

controller tạo ra 2 biến là firstName và lastName. Hai biến này còn được gọi là thuộc tính (property) của controller.

Chỉ thị ng-model bind giá trị của trường input vào thuộc tính của controller (firstName và lastName)

Phương thức của controller

Ở trên chúng ta làm quen với thuộc tính của controller. Như đã nói controller trong AngularJS chín là 1 đối tượng và như vậy nó cũng sẽ có phương thức. Phương thức của controller (hay controller method) đơn giản là 1 hàm.

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

<p>Tên: <input type="text" ng-model="firstName"></p>
<p>Họ: <input type="text" ng-model="lastName"></p>
<p>Họ & Tên: {{fullName()}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Trần Văn";
    $scope.lastName = "Tí";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

Ví dụ khác về controller

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

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Trần Văn Tí',country:'Vietnam'},
        {name:'David Tèo',country:'USA'},
        {name:'Jonathan Bánh Bèo',country:'Singapore'}
    ];
});
</script>

Lưu AngularJS controller trong 1 tệp riêng

Với các ứng dụng đơn giản thì bạn có thể để mã lệnh của các controller trong tệp HTML. Tuy nhiên với các ứng dụng phức tạp thì controller nên được tách riêng ra một tập tin (và cả model) để giúp mã lệnh dễ quản lý hơn.