Rate this post

Như đã được đề cập trong bài viết trước (Exploring AngularJS – Expressions, Directives), chúng ta sẽ tiếp tục khám phá khái niệm về Controller trong AngularJS trong bài viết này. Đúng như tên gọi của nó, ng-controller directive là một phần quan trọng giúp quản lý logic và dữ liệu trong ứng dụng của chúng ta. Ngoài ra, một khái niệm mới mà chúng ta sẽ tìm hiểu là “scope,” một khía cạnh quan trọng đối với việc hiểu rõ cách dữ liệu được chia sẻ và quản lý trong AngularJS.

Chúng ta sẽ bắt đầu bằng cách tìm hiểu cách ng-controller directive giúp chúng ta tổ chức và quản lý logic ứng dụng. Sau đó, chúng ta sẽ khám phá khái niệm của “scope,” làm rõ cách nó tương tác với controller và giúp định rõ phạm vi của dữ liệu trong ứng dụng AngularJS.

Mục tiêu của bài viết này là giúp bạn hiểu rõ hơn về cách sử dụng controller và scope để xây dựng các ứng dụng AngularJS mạnh mẽ và dễ bảo trì. Hãy cùng nhau đào sâu vào chi tiết và khám phá các khía cạnh quan trọng của AngularJS trong hành trình phát triển ứng dụng web của bạn.

Giới thiệu về AngularJS Controller

  1. Định nghĩa Controller trong AngularJS:
    Trong AngularJS, khái niệm về controller được định nghĩa một cách tương tự như hàm constructor trong JavaScript. Controller nhận đối số là đối tượng $scope và có trách nhiệm khởi tạo và xây dựng các mô hình, kết nối chúng với các View (HTML).
   // Ví dụ đơn giản về cách định nghĩa một Controller
   angular.module('myApp', [])
       .controller('myController', function($scope) {
           $scope.message = 'Chào mừng bạn đến với ứng dụng AngularJS!';
       });
  1. Khi nào nên sử dụng Controller:
  • Khi cần thiết lập giá trị và trạng thái ban đầu cho đối tượng $scope.
  • Khi cần thêm các hàm và hành vi vào đối tượng $scope.
  • Controller nên chỉ chứa logic liên quan đến nghiệp vụ (business logic).
  1. Khi nào không nên sử dụng Controller:
  • Thao tác với DOM: Khi cần thay đổi giá trị nội dung và thuộc tính của các thẻ HTML, nên sử dụng cơ chế data-binding của AngularJS thay vì Controller.
  • Format input: Validate và kiểm tra định dạng dữ liệu của input trong form nên sử dụng các angular form controls thay vì Controller.
  • Filter output: Lọc và chuyển đổi định dạng dữ liệu nên sử dụng angular filters.
  • Chia sẻ dữ liệu: Trong trường hợp này, sử dụng angular services.
  • Quản lý thời gian sống của các thành phần (component).

Bằng cách hiểu rõ về cách sử dụng Controller và nhận biết khi nào nên và không nên sử dụng chúng, chúng ta có thể xây dựng ứng dụng AngularJS hiệu quả và dễ bảo trì.

Một số ví dụ về Controller

Ví dụ 1: Khởi tạo giá trị ban đầu cho đối tượng $scope

Trong ví dụ này, chúng ta tạo một ứng dụng AngularJS với một controller có tên là “GreetingController”. Controller này sử dụng đối tượng $scope để khởi tạo và chia sẻ dữ liệu giữa controller và view.

  1. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AngularJS Controller</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="GreetingController">
        <h1>Hello {{ greeting }}</h1>
    </div>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller('GreetingController', ['$scope', function($scope) {
            $scope.greeting = 'Framgia!';
        }]);
    </script>
</body>
</html>
  1. Giải thích:
  • Trong <body>, chúng ta sử dụng ng-app="myApp" để khai báo ứng dụng AngularJS với tên là “myApp”.
  • Sử dụng ng-controller="GreetingController" để kết nối controller “GreetingController” với phần HTML dưới đó.
  • Trong JavaScript, chúng ta định nghĩa một module “myApp” và một controller “GreetingController”.
  • Trong controller, chúng ta sử dụng $scope để tạo một biến greeting với giá trị là “Framgia!”.
  • Trên giao diện người dùng (view), chúng ta sử dụng {{ greeting }} để hiển thị giá trị của biến greeting.
  1. Kết quả:
  • Khi trình duyệt mở trang HTML này, bạn sẽ thấy một tiêu đề “Hello Framgia!” được hiển thị. Điều này là do dữ liệu từ biến greeting trong controller được ánh xạ lên view thông qua cơ chế data-binding của AngularJS.

Ví dụ 2: Controller Method – Thêm Hành Vi cho Đối Tượng $scope

Trong ví dụ này, chúng ta tạo một ứng dụng AngularJS với một controller có tên là “personCtrl”. Controller này không chỉ khởi tạo giá trị cho các thuộc tính firstNamelastName mà còn thêm một phương thức fullName() để tính và hiển thị tên đầy đủ.

  1. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AngularJS Controller</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="personCtrl">
        First Name: <input type="text" ng-model="firstName"></input><br>
        Last Name: <input type="text" ng-model="lastName"></input><br>
        <hr />
        Full Name: {{ fullName() }}
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', ['$scope', function($scope) {
            $scope.firstName = "Doan";
            $scope.lastName = "Duc";

            $scope.fullName = function() {
                return $scope.firstName + " " + $scope.lastName;
            };
        }]);
    </script>
</body>
</html>
  1. Giải thích:
  • Tương tự như ví dụ trước, chúng ta khai báo ứng dụng AngularJS với tên là “myApp” và một controller “personCtrl”.
  • Trong controller, chúng ta khởi tạo giá trị ban đầu cho firstNamelastName.
  • Chúng ta định nghĩa một phương thức mới trong controller là fullName(). Phương thức này trả về chuỗi kết hợp của firstNamelastName.
  • Trên giao diện người dùng, chúng ta sử dụng ng-model để liên kết các trường nhập với các thuộc tính tương ứng trong $scope.
  • Khi nhập dữ liệu vào các trường “First Name” và “Last Name”, phương thức fullName() sẽ tính toán và hiển thị tên đầy đủ.
  1. Kết quả:
  • Khi bạn mở trang HTML này trong trình duyệt, bạn sẽ thấy hai ô nhập liệu cho “First Name” và “Last Name” và một dòng chữ hiển thị “Full Name” sẽ hiển thị tên đầy đủ khi bạn nhập dữ liệu. Điều này thể hiện tính tương tác giữa dữ liệu và phương thức trong controller và view.

Tổng Kết

Trong bài viết này, chúng ta đã có cái nhìn cơ bản về hai khái niệm quan trọng trong AngularJS là $scopecontroller. Chúng ta đã tìm hiểu cách định nghĩa và cơ chế hoạt động của chúng.

$scope:

  • $scope là một đối tượng đặc biệt trong AngularJS, chứa các biến và hàm xử lý.
  • Mỗi controller tương ứng với một $scope, quản lý dữ liệu và logic của mình trong phạm vi của tag HTML được gắn liền với nó.
  • Chúng ta có thể có nhiều $scope trong một ứng dụng AngularJS, và chúng độc lập với nhau.

Controller:

  • Trong AngularJS, mỗi controller được định nghĩa tương tự như một hàm constructor trong JavaScript.
  • Controller có nhiệm vụ khởi tạo, xây dựng các model và liên kết chúng với view (HTML).
  • Nên sử dụng controller khi cần thiết lập giá trị, trạng thái ban đầu cho $scope, thêm hàm và hành vi vào đối tượng $scope.
  • Không nên sử dụng controller khi thao tác với DOM, format input, filter output, chia sẻ dữ liệu, và quản lý thời gian sống của các component.

Tương Lai:

  • Trong các bài viết tiếp theo, chúng ta sẽ khám phá thêm về cách sử dụng controller trong nhiều ví dụ khác nhau, giúp củng cố kiến thức và hiểu rõ hơn về các directive và khái niệm trong AngularJS.

Nhờ việc áp dụng kiến thức đã học, bạn sẽ có cơ hội nắm vững hơn và không quên điều gì về $scopecontroller. Hãy tiếp tục theo dõi để khám phá thêm về AngularJS và cách nó làm tăng khả năng tương tác trong ứng dụng web.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now