📌 Controller Trong AngularJS: Hướng Dẫn Chi Tiết

Trong AngularJS, Controller đóng vai trò trung tâm trong mô hình MVC (Model-View-Controller), giúp quản lý dữ liệu và logic nghiệp vụ của ứng dụng. Controller kết nối Model (dữ liệu) với View (giao diện) thông qua $scope, cho phép dữ liệu hiển thị trên giao diện được cập nhật một cách tự động mà không cần thao tác trực tiếp vào DOM.

Hiểu rõ cách tạo, sử dụng và tối ưu hóa Controller trong AngularJS giúp lập trình viên xây dựng ứng dụng dễ bảo trì, linh hoạt và có hiệu suất cao.

🔹 Nội dung bài viết

✔ Khái niệm và vai trò của Controller trong AngularJS
✔ Cách tạo Controller và sử dụng $scope để binding dữ liệu
✔ Chia sẻ dữ liệu giữa các Controller bằng $rootScope, Services hoặc Factories
✔ Best practices giúp tối ưu hóa Controller
✔ So sánh Controller AngularJS với Component trong Angular 2+
✔ Ứng dụng thực tế của Controller trong phát triển web

💡 Nếu bạn đang tìm kiếm một hướng dẫn chi tiết về Controller trong AngularJS, bài viết này sẽ giúp bạn hiểu rõ và áp dụng vào dự án của mình! 🚀

Controller Trong AngularJS Là Gì?

Định nghĩa Controller

Trong AngularJS, Controller là một hàm JavaScript, dùng để điều khiển dữ liệu và xử lý logic trong ứng dụng. Nó giúp quản lý tương tác giữa Model (dữ liệu) và View (giao diện), đảm bảo dữ liệu hiển thị luôn được cập nhật chính xác.

Tại sao cần sử dụng Controller?

✅ Điều khiển luồng dữ liệu giữa Model và View – Giúp hiển thị và cập nhật dữ liệu trên giao diện.
✅ Tách biệt mã HTML và logic xử lý – Dễ bảo trì và mở rộng ứng dụng.
✅ Xử lý logic nghiệp vụ – Controller có thể chứa các phương thức để thực hiện tính toán, kiểm tra điều kiện, gọi API.

Ví dụ về Controller đơn giản

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.message = "Chào mừng bạn đến với AngularJS!";
});

<div ng-app="myApp" ng-controller="myController">
    <h2>{{ message }}</h2>
</div>

👉 Giá trị của message được cập nhật trong View mà không cần thao tác DOM.

Cách Tạo Controller Trong AngularJS

Khai báo Controller bằng ng-controller

Controller được gán vào một phần tử DOM bằng ng-controller, giúp quản lý dữ liệu hiển thị trong View.

app.controller("userController", function ($scope) {
    $scope.username = "Nguyễn Văn A";
});

<div ng-controller="userController">
    <p>Người dùng: {{ username }}</p>
</div>

📌 Dữ liệu $scope.username tự động hiển thị trong View mà không cần thao tác DOM.

Các Thành Phần Chính Của Controller

$scope – Kết nối dữ liệu giữa View và Model

app.controller("studentController", function ($scope) {
    $scope.student = {
        name: "Trần Văn B",
        age: 20,
        course: "Lập trình AngularJS"
    };
});

<div ng-controller="studentController">
    <p>Họ và tên: {{ student.name }}</p>
    <p>Tuổi: {{ student.age }}</p>
    <p>Khoá học: {{ student.course }}</p>
</div>

📌 Khi giá trị student.name thay đổi, View cũng tự động cập nhật.

Sử dụng phương thức trong Controller

app.controller("counterController", function ($scope) {
    $scope.count = 0;
    $scope.increment = function () {
        $scope.count++;
    };
});

<div ng-controller="counterController">
    <p>Giá trị: {{ count }}</p>
    <button ng-click="increment()">Tăng</button>
</div>

📌 Nhấn nút “Tăng” sẽ thay đổi giá trị count mà không cần reload trang.

Chia Sẻ Dữ Liệu Giữa Các Controller

Sử dụng $rootScope

app.run(function ($rootScope) {
    $rootScope.sharedData = "Dữ liệu chung giữa các Controller";
});

app.controller("controllerA", function ($scope, $rootScope) {
    $scope.message = "Dữ liệu từ Controller A";
});
app.controller("controllerB", function ($scope, $rootScope) {
    $scope.message = "Dữ liệu từ Controller B";
});

<div ng-controller="controllerA">
    <p>{{ message }}</p>
    <p>{{ sharedData }}</p>
</div>
<div ng-controller="controllerB">
    <p>{{ message }}</p>
    <p>{{ sharedData }}</p>
</div>

📌 $rootScope giúp chia sẻ dữ liệu giữa các Controller trong toàn bộ ứng dụng.

Sử dụng Services để truyền dữ liệu

app.factory("OrderService", function () {
    let orders = [{ id: 101, total: 500 }];
    return { getOrders: function () { return orders; } };
});
app.controller("orderController", function ($scope, OrderService) {
    $scope.orders = OrderService.getOrders();
});

<div ng-controller="orderController">
    <ul>
        <li ng-repeat="order in orders">Đơn hàng #{{ order.id }} - ${{ order.total }}</li>
    </ul>
</div>

📦 Dữ liệu được quản lý tốt hơn khi sử dụng Services thay vì $rootScope.

So Sánh Controller Trong AngularJS Với Component Angular 2+

📌 Angular 2+ sử dụng Component thay vì Controller, giúp code dễ tái sử dụng và tối ưu hóa hiệu suất.

Kết Luận

• Controller trong AngularJS giúp quản lý dữ liệu và điều khiển View thông qua $scope.
• Chia sẻ dữ liệu giữa các Controller bằng $rootScope, Services hoặc Factories` giúp ứng dụng linh hoạt hơn.
• Controller trong AngularJS đã được thay thế bằng Component trong Angular 2+, giúp code hiện đại và dễ mở rộng hơn.

💡 Nếu bạn đang phát triển ứng dụng AngularJS, hãy thử thực hành với Controller để hiểu rõ hơn cách nó hoạt động! 🚀