Ví dụ về Controller trong AngularJS

Ví dụ về Controller trong AngularJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ về Controller trong AngularJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Ở 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

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> 


XEM DEMO.Trường hợp 2: Controller thuộc một ứng dụng rỗng (ng-app="")

Ví dụ:

angular.module("myapp", []).controller("HeaderController", function($scope) {
 
    $scope.data = {
        title : 'các bạn',
        website : 'hoidapcode.com'
    };
}); 


<div ng-app="">
    <div ng-controller="HeaderController">
        <h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2>
    </div>
</div> 


XEM DEMOLư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 Hoidapcode.com 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',
                    email : 'hoidapcode.com@gmail.com',
                    phone : '0979 306 999',
                    topic : 'Học lập trình online miễn phí',
                    website : "hoidapcode.com"
                };
            });
        </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ì.

Hy vọng với bài viết về Ví dụ về Controller trong AngularJS đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!