Bài 03: Tìm hiểu Controller trong AngularJS - AngularJS căn bản
Ở bài trước chúng ta đã thực hành hai ví dụ đơn giản trong AngualrJS nhưng có những cái mà có lẽ bạn thắc mắc không hiểu tại sao phải code như vậy, những thứ đó chúng ta sẽ tìm hiểu dần dần qua từng bài, từng ví dụ cụ thể nên nếu bạn không tiếp thu được thì hãy bỏ qua đoạn đó nhé. Tuy nhiên theo tôi ...
Ở bài trước chúng ta đã thực hành hai ví dụ đơn giản trong AngualrJS nhưng có những cái mà có lẽ bạn thắc mắc không hiểu tại sao phải code như vậy, những thứ đó chúng ta sẽ tìm hiểu dần dần qua từng bài, từng ví dụ cụ thể nên nếu bạn không tiếp thu được thì hãy bỏ qua đoạn đó nhé. Tuy nhiên theo tôi thì nó đơn giản nên đa số bạn nào cũng hiểu được cả.
Trong các ví dụ ứng dụng Angular đầu tiên tôi có sử dụng controller để xử lý, đây là một thành phần trong mô hình MVC nên trong bài này chúng ta sẽ tìm hiểu nó trước, sau đó ở các bài tiếp theo chúng ta tìm hiểu các thành phần khác như template, services, scope.
1. Controller trong Angular
Trong Angular, 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ừ đây bên Views sẽ sử dụng các dữ liệu trong $scope để hiển thị ra tương ứng.
Khi một controller được gán vào các DOM trong HTML bằng thuộc tính chỉ thị ng-controller thì Angular sẽ nhận biết và tạo một đối tượng Controller mới sử dụng như là một hàm khởi tạo, nghĩa là sẽ được chạy khi website được load xong. Lúc này Angular cũng tạo luôn một đối tượng $scope mới dành riêng cho controller đó. Như ở ví dụ 2 bài trước các bạn thấy hai $scope ở hai controller khác nhau có cùng giá trị nhưng khi hiển thị ra thì nó không liên quan với nhau.
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
2. Khai báo controller trong Angular
Trường hợp 1: Mỗi controller trong Angular dùng để thực thi một nhiệm vụ nhất định và nó thuộc phạm vi của một ứng dụng (ng-app).
Ví dụ:
<div ng-app="myapp">
<div ng-controller="HeaderController">
<h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2>
</div>
</div>ng-app="myapp" và tạo một controller nằm bên trong với tên là ng-controller="HeaderController", như vậy Controller (HeaderController) đã nằm gọn bên trong App (myapp). Trong trường hợp này bắt buộc ta phải dùng javascript để khai báo với Angular là ta có sử dụng app nào và controller nào:
angular.module("myapp", []).controller("HeaderController", function($scope) {
$scope.data = {
title : 'các bạn',
website : 'Zaidap.com.net'
};
});Trường hợp 2: Controller thuộc một ứng dụng rỗng (ng-app="")
Ví dụ:
<div ng-app="">
<div ng-controller="HeaderController">
<h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2>
</div>
</div>function HeaderController($scope){
$scope.data = {
title : 'các bạn',
website : 'Zaidap.com.net'
};
}Lưu ý: là tên tham số truyền vào hàm HeaderController bắt buộc phải tên là $scope.
3. Ví dụ Controller trong Angular
Sau đây là ví dụ hiển thị thông tin cá nhân của website Zaidap.com.net bằng cách sử dụng AngularJS để hiển thị. Trong ví dụ này chúng ta sẽ tạo một đoạn chữ hiển thị thông tin cá nhân, mỗi thông tin ta sẽ đưa tham số {{ten}} vào để Angular binding lặp dữ liệu.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="WebsiteInfomation">
<p>
Chủ sở hữu: {{data.fullname}} <br/>
Email: {{data.email}} <br/>
Điện Thoại: {{data.phone}} <br/>
Chủ Đề: {{data.topic}} <br/>
Website: {{data.website}}
</p>
</div>
<script>
angular.module('myapp', []).controller('WebsiteInfomation', function($scope){
$scope.data = {
fullname : 'Nguyễn Văn Cường',
email : 'Thehalfheart@gmail.com',
phone : '0979 306 603',
topic : 'Học lập trình online miễn phí',
website : "Zaidap.com.net"
};
});
</script>
</body>
</html>4. Lời kết
Qua bài này các bạn đã biết một số cách sử dụng Controller trong Angular và những trường hợp nào nên sử dụng Controller và trường hợp nào thì không nên sử dụng Controller. Ở bài tiếp theo chúng ta sẽ tìm hiểu về $scope nhé, vì mấy bài này toàn dùng $scope mà chưa biết nó là cái gì.
