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
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ụ:
1
2
3
4
5
| |
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:
1
2
3
4
5
6
7
| angular.module("myapp", []).controller("HeaderController", function($scope) { $scope.data = { title : 'các bạn', website : 'freetuts.net' };}); |
Ví dụ:
1
2
3
4
5
| |
1
2
3
4
5
6
| function HeaderController($scope){ $scope.data = { title : 'các bạn', website : 'freetuts.net' };} |
$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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| |
"myapp">
"WebsiteInfomation">
Chủ sở hữu: {{data.fullname}}
Email: {{data.email}}
Điện Thoại: {{data.phone}}
Chủ Đề: {{data.topic}}
Website: {{data.website}}
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ì.
Bài đăng
0 nhận xét:
Đăng nhận xét