Bài 8: AngularJS – Controllers

Ứng dụng AngualarJS được kiễm soát bởi controller. Directive ng-controller định nghĩa ứng dụng của controller.

Một controller là một đối tượng Javascript, được tạo bởi các chuẩn khởi tạo đối tượng của Javascript.

EX:

<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=”Tin”;

            $scope.lastName=”Ku”;

});

</script>

Diễn giải

Ứng dụng AngularJS được định nghĩa bắt đầu là ng-app=”myApp” và chạy bên trong thẻ <div>

Thuộc tính ng-controller=”myCtrl” là một directive AngularJS. Nó định nghĩa một controller.

Hàm myCtrl là một hàm javascript

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

Trong AngularJS, $scope là một đối tượng, nó là biến được định nghĩa như chủ của ứng dụng và hàm, trong tiếng anh nó là chữ owner.

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

Directive ng-model sẽ kết các field input tới thuộc tính của controller (firstName và lastName).

Vậy nếu giờ tôi đặt 2 thuộc tính của controller không phải giống với model thì nó sẽ ra sao?

Controller Methods

Trong ví dụ trên đã chứng minh một đối tượng controller với 2 thuộc tính: lastName và firstName.

Một controller cũng có thể có các phương thức/hàm (các biến như các hàm).

EX:

<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=”Tin”;

            $scope.lastName=”Ku”;

            $scope.fullName=function(){

                        Return $scope.firstName + “ “ + $scope.lastName;

};

});

</script>

Đưa Controller Từ Các File Bên Ngoài

Trong các ứng dụng lớn, thì người ta thường lưu trữ các controller trong các file bên ngoài, hay nói dể hiểu là bỏ nó vào 1 file riêng rồi sau đó import nó vào ứng dụng của bạn.

Bây giờ copy cái đoạn script trong ví dụ trên và bỏ nó vào 1 file với tên là personController.js.

<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> //Nhớ kèm đường dẩn cho đúng nơi bạn cất giữ file personController.js, nếu bỏ cùng thư mục của ứng dụng như Ad thì chỉ ghi tên file ra  là ok.

Chúng ta xét thêm một ví dụ về tạo controller từ file bên ngoài ứng dụng.

Tạo mới một file controller với tên là provinceController.js với nội dung như sau :

angular.module(‘myApp’,[]).controller(‘namesCtrl’,function($scope){

            $scope.names=[

                        {name: ‘Bin’, province:’Dong Thap’},

                        {name:’Tin’, province:’Tra Vinh’},

                        {name: ‘Ken’, province:’Binh Phuoc’}

];

}); /* Ad quê ở Đồng Tháp và Trà Vinh nên được ưu tiên nha hehe*/

Sau đó sử dụng file controller trong ứng dụng:

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

<ul>

            <li ng-repeat=”x in names”> /*các bạn có thể hiểu nó là vòng lặp foreach vậy*/

            {{x.name + ‘,’ + x.country}}

            </li>

</ul>

</div>

<script src=”provinceController.js”></script>