[AngularJS toàn tập] Phần 4 : Controller

Bài đăng này đã không được cập nhật trong 3 năm

[AngularJS toàn tập] Phần 4 : Controller

Trong các phần trước mình đã nói về directive và expression, các ví dụ trước đó mình sử dụng đều khá đơn giản, chắc là hầu hết các bạn đều hiểu được cả. Nếu đoạn nào bạn ko tiếp thu được thì cứ bỏ qua đoạn đó, hiểu được ý chính là được. Ở bài này và các bài sau sẽ bổ sung thêm kiến thức cho bạn và bạn có thể hiểu rõ hơn nữa về Angular JS.

Trong các ví dụ ở các phần trước thì thỉnh thoảng mình có sử dụng controller để xử lý, đây là một thành phần trong mô hình MVC và trong phần này mình sẽ tìm hiểu về nó. Và ở các phần sau thì mình sẽ chỉ rõ tiếp về các phần khác như template, services, scope ….

angularjs controller.jpg

Controller trong Angular

Các ứng dụng AngularJS hoạt động chính dựa vào thành phần controller để điều khiển luồng dữ liệu của ứng dụng. Các controller được định nghĩa với ng-controller. Một controller là một đối tượng javascript bao gồm các hàm và các thuộc tính. Mỗi một controller đều chấp nhận $scope là tham số để để hướng đến ứng dụng/module mà phần controller này điều khiển.

Controller là một hàm khởi tạo có nhiệm vụ thực hiện, xử lý dữ liệu cho đối tượng $scope, từ đó View có thể sử dụng các dữ liệu trong $scope và để hiện thị ra cho người dùng. Controller được gán vào trong các DOM của HTML bằng directive ng-controller, lúc đó Angular sẽ nhận biết và tạo ra đối tượng controller mới, đồng thời lúc này Angular cũng tạo luôn 1 đối tượng $scope mới dành riêng cho controller đó.

Khai báo controller trong Angular

Có hai trường hợp khi khai báo controller.

Trường hợp 1 : Các controller được dùng để thực hiện 1 nhiệm vụ nhất định và nó thuộc phạm vi của một ứng dụng (ng-app)

<!DOCTYPE html>
<html>
    <head>
        <title>About</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="AboutController">
            <p>
                Chủ sở hữu: {{data.company_name}} <br/>
                Email: {{data.email}} <br/>
                Điện Thoại: {{data.phone}} <br/>
                Chủ Đề: {{data.topic}} <br/>
                Website: {{data.website}}
            </p>
        </div>
    </body>
</html>

Như trên thì mình đã khai báo một ng-app=”myapp” và sau đó tạo ra một controller cho myapp tên là ng-controller=”AboutController”, như vậy controller AboutController nằm ở bên trong App là myapp. Lúc này chúng ta bắt buộc phải dùng javascript để khai báo với Angular là ta có sử dụng app nào và controller nào.

<script>
angular.module('myapp', []).controller('AboutController', function($scope){
  $scope.data = {
    company_name : 'Framgia',
    email : 'framgia@gmail.com',
    phone : '0123 456 789',
    topic : 'Angular JS toàn tập',
    website : 'viblo.asia'
  };
}
);
</script>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/natzwt5b/

Trường hợp 2: Controller thuộc một ứng dụng rỗng (ng-app="")

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    </head>
    <body ng-app="">
        <div ng-controller="IndexController">
            <div>
              Chào mừng bạn {{data.fullname}}đến với {{data.website}
            </div>
        </div>
</body>
</html>

Trong trường hợp này ta sẽ xây dựng một hàm trong javascript có tên gọi giống như tên của ta khai báo trong thuộc tính ng-controller.

<script>
function IndexController($scope){
  $scope.data = {
    fullname : 'Nguyễn Văn A',
    email : 'nguyenvana@gmail.com',
    website : "viblo.asia"
  };
}
</script>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/96bgy8t5/

Chú ý: là tên tham số truyền vào hàm IndexController bắt buộc phải tên là $scope

Lúc nào thì nên sử dụng controller trong Angular

Nên sử dụng Controller trong Angular khi:

Controller trong Angular dùng để thiết lâp giá trị, trạng thái ban đầu cho đối tượng $scope
Thêm các hàm, hành vi vào đối tượng $scope

Không nên sử dụng Controller trong Angular khi:

Thao tác với DOM, nghĩa là dùng Controller để thay đổi giá trị của DOM (nội dung, thuộc tính). Trong trường hợp này thì có cơ chế data-binding rồi, bởi vậy không nên sử dụng Controller.
Validate form, nghĩa là không dùng controller để kiểm tra định dạng dữ liệu input của form. Trong trường hợp này sử dụng Angular Form Controls để thay thế.
Lọc dữ liệu, nghĩa là chuyển đổi định dạng dữ liệu, trong trường hợp này thì dùng đối tượng Filter trong Angular.
Chia sẽ dữ liệu, trường hợp này dùng Angualar Service
Quản lý thời gian sống của các component

Ví dụ Controller trong Angular

Sau đây là một ví dụ đẩy đủ để bạn hiểu rõ hơn về controller

<div ng-app="" ng-controller="nhanvienController">
...
</div>

Ở đây là phần thông báo nhanvienController sử dụng ng-controller directive. Những bước tiếp theo, chúng ta sẽ định nghĩa nhanvienController như sau:

<script>
function nhanvienController($scope) {
   $scope.nhanvien = {
      ho: "Nguyen Van",
      ten: "A",
      hoten: function() {
         var doituongnhanvien;
         doituongnhanvien = $scope.nhanvien;
         return doituongnhanvien.ho + " " + doituongnhanvien.ten;
      }
   };
}
</script>

nhanvienController nghĩa như là một đối tượng JavaScript với $scope là tham số.
$scope hướng đến ứng dụng và được sử dụng bởi đối tượng nhanvienController.
$scope.nhanvien là thuộc tính của đối tượng nhanvienController.
ho và ten là hai thuộc tính của đối tượng $scope.nhanvien. Chúng ta khởi tạo các giá trị cho chúng (ho: Nguyen Van, ten:A).
hoten là hàm của đối tượng $scope.nhanvien có nhiệm vụ là trả về giá trị là tên đầy đủ của nhân viên này.
Trong hàm hoten, chúng ta nhận đối tượng nhân viên và sau đó trả lại tên đã so khớp.

Chú ý: chúng ta cũng có thể định nghĩa đối tượng controller ở các tệp JS riêng rẽ và khai báo trong trang HTML.

Bây giờ chúng ta sử dụng thuộc tính nhanvienController với ng-model hoặc expression như sau:

Nhap ho: <input type="text" ng-model="nhanvien.ho"><br>
Nhap ten: <input type="text" ng-model="nhanvien .ten"><br>
<br>
Ban dang nhap: {{nhanvien .hoten()}}

Chúng ta đã gắn kết giá trị nhanvien.ho và nhanvien.ten vào 2 hộp input. Chúng ta đã gắn kết giá trị nhanvien.hoten() tới trang HTML. Bây giờ, mỗi khi chúng ta nhập một giá trị ho hay ten vào trong hộp input, tên đầy đủ của nhân viên này sẽ được tự động cập nhật.

<html>
<head>
<title>Thanh phan Controller trong AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<h2>Ung dung AngularJS</h2>
<div ng-app="ungdungAngularjs" ng-controller="nhanvienController">

Nhap ho: <input type="text" ng-model="nhanvien.ho"><br><br>
Nhap ten: <input type="text" ng-model="nhanvien.ten"><br>
<br>
Ban dang nhap: {{nhanvien.hoten()}}
</div>
<script>
var ungdungAngularjs = angular.module("ungdungAngularjs", []);

ungdungAngularjs.controller('nhanvienController', function($scope) {
   $scope.nhanvien = {
      ho: "Nguyen Van",
      ten: "A",
      hoten: function() {
         var doituongnhanvien;
         doituongnhanvien = $scope.nhanvien;
         return doituongnhanvien.ho + " " + doituongnhanvien.ten;
      }
   };
});
</script>
</body>
</html>

Xem demo tại https://jsfiddle.net/SonCheDinh/p8nmr45f/

Bài viết về controller của mình đến đây là hết, ở các bài viết sau mình sẽ nói rõ thêm về template, services, scope ... để bạn có thể làm việc tốt và hiểu rõ hơn về Angular.

AngularJS