Controller trong AngularJS

18-04-2022
Toanngo92
0 Comments

Mục lục

Khái niệm Controller trong Angular

Trong Angular, Controller là một hàm khởi tạo, khi thực thi nó sẽ khởi tạo một biến đối tượng, có nhiệm vụ thực hiện xử lý, chủ yếu làm việc với dữ liệu của biến $scope (kiểu dữ liệu là object), và view sẽ sử dụng các dữ liệu trong biến $scope để hiển thị ra tương ứng cho người dùng.

Xét một ví dụ dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Controller</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="examController">
        <div ng-controller="headerController">
            {{name}} - {{data}}
        </div>
        <div ng-controller="mainController">
            {{name}} - {{data}}
        </div>
        <div ng-controller="footerController">
            {{name}} - {{data}}
        </div>
    </div>
    <script>
        var app = angular.module('examController', []);
        app.controller('headerController', function($scope){
            $scope.name = "This is header";
        });
        app.controller('mainController', function($scope){
            $scope.name = "This is main";
            $scope.data = "main data";
        });
        app.controller('footerController', function($scope){
            $scope.name = "This is footer";
        });
    </script>
</body>
</html>

Kết quả:

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 diện 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 đó. Ở ví dụ trên, chúng ta thấy ở 3 controller khác nhau, các controller dù cùng hứng tham số có tên $scope nhưng thực chất 3 biến này là 3 biến được khởi tạo độc lập, các thuộc tính của chúng cũng như tên gọi, chỉ có thể truy vấn tới nó ở trong phạm vi của controller khởi tạo.

Bối cảnh nên Sử dụng Controller:

Mặc định, Controller trong Angular dùng để khởi tạo giá trị, trạng thái ban đầu cho đối tượng $scope
Thêm các phương thức (hàm) vào đối tượng $scope

Bối cảnh không nên sử dụng Controller:

Thao tác với DOM (đối tượng thẻ HTML): không dùng Controller để thay đổi giá trị của DOM (nội dung, thuộc tính), vì angular cung cấp cơ chế data-binding đáp ứng được nghiệp vụ này
Validate form: 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: 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ý vòng đời của các component

Khai báo controller trong Angular

Cách 1: Khai báo controller bên trong ng-app có chứa tên cụ thể, mỗi controller được khởi tạo thông qua phương thức controller của đối tượng app trong angular. 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ụ:

<!DOCTYPE html>
<html>

<head>
    <title>Example controller</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>
    <div ng-app="myapp">
        <div ng-controller="mainController">
            <h1>Thông tin nhân sự</h1>
            <table>
                <thead>
                    <tr>
                        <th>Tên</th>
                        <th>Tuổi</th>
                        <th>Địa chỉ</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{employee.name}}</td>
                        <td>{{employee.age}}</td>
                        <td>{{employee.website}}</td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>
</body>
<script>
    var app = angular.module("myapp", []);
    app.controller("mainController", function ($scope) {
        $scope.employee = {
            name: 'Toanngo92',
            age: 20,
            website: 'https://hocvietcode.com'
        };
    });
</script>
</html>

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=”mainController”, với cấu trúc HTML phía trên, chúng ta thấy thẻ chứa thuộc tính ng-controller nằm phía trong ( là thẻ con) của thẻ chứa thuộc tính ng-app. Ý nghĩa là controller có tên “mainController” nằm trong ứng dụng “myapp”

Cách 2: Khai báo controller thông qua function javascript. Nếu sử dụng cách này, khai báo giá trị rỗng cho thuộc tính/directive ng-app bên trong cấu trúc html như code mẫu phía dưới

Ví dụ:

<!DOCTYPE html>
<html>

<head>
    <title>Example controller</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>
    <div ng-app="">
        <div ng-controller="mainController">
            <h1>Thông tin nhân sự</h1>
            <table>
                <thead>
                    <tr>
                        <th>Tên</th>
                        <th>Tuổi</th>
                        <th>Địa chỉ</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{employee.name}}</td>
                        <td>{{employee.age}}</td>
                        <td>{{employee.website}}</td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>
</body>
<script>
    function mainController($scope) {
        $scope.employee = {
            name: 'Toanngo92',
            age: 20,
            website: 'https://hocvietcode.com'
        };
    }
</script>
</html>

Trong trường hợp này ta sẽ khai báo các controller tầng script như một hàm trong javascript và có tên gọi giống như giá trị chúng ta khai báo trong thuộc tính app-controller.

Lưu ý: là tên tham số truyền vào trong controller bắt buộc phải tên là $scope.