Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 03: Tìm hiểu Controller trong AngularJS
Ở 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.
Bài viết này được đăng tại [free tuts .net]
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 : 'freetuts.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 : 'freetuts.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 freetuts.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 : "freetuts.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ì.
