ANGULARJS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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>
Trong đó mình đã khai báo một app là 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'
    };
});
XEM DEMO.

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>
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 app-controller.

function HeaderController($scope){
    $scope.data = {
        title : 'các bạn',
        website : 'freetuts.net'
    };
}
XEM DEMO

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ì.

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Top