Ví dụ về Directives trong AngularJS

Ví dụ về Directives 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ề Directives 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 tìm hiểu về Scope trong angularJS nhưng chưa bàn luận về các kiến thức sâu hơn như mô hình cấu trúc DOM, chu kỳ sống của Scope. Nhưng tôi quyết định bỏ qua và sẽ trình bày nó trong một bài gần nhất, lý do đơn giản là nếu tiếp tục tìm hiểu mà không có viết ứng dụng kết hợp với các kiến thức khác thì bạn sẽ khó hiểu bài, thay vì tiếp tục thì ta sẽ tìm hiểu một số vấn đề liên quan rồi sau đó quay ngược lại, lúc này bạn sẽ vỡ òa "sao mà nó đơn giản quá vậy" 

Trong bài này chúng ta sẽ tìm hiểu khái niệm Directives trong AngularJS, bạn sẽ thấy có nhiều bất ngờ khi tìm hiểu nó đấy, lý do là chúng ta đã sử dụng nó trong các ví dụ ở bài trước mà không hề hay biết nó là Directives . Không lôi thôi dài dòng nữa, ta bắt đầu thôi.

1. AngularJS Directives là gì?

Directives là một thành phần mở rộng HTML, hay nói cách khác là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm, vì nó của riêng của Angular nên phải tuân thủ theo nguyên tắc của nó là chữ bắt đầu luôn luôn là ký tự mà tôi bôi đỏ ng-prefix, trong đó tiền tố prefix là tên của derective mà chúng ta sử dụng. Như ở các ví dụ trước, để khai báo là một Directive Controller thì chúng ta khai báo ng-controller, quá đơn giản phải không nào.

Ví dụ dưới đây chúng ta sử dụng ba Directives (ng-controller, ng-model, ng-bind):

XEM DEMO

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script language="javascript">
                angular.module('myapp', [])
                .controller('MyController', function($scope) {
                    $scope.name = 'Chào mừng các bạn đến với website hoidapcode.com';
                });
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="MyController">
            <h2>Nhập nội dung thông bao:</h2>
            <input ng-model="name"> <br/>
            <h2>Nội dung bạn đang gõ là:</h2>
            <span ng-bind="name"></span>
      </div>
    </body>
</html> 

Giao diện: Trong ví dụ này mục đích là khi nhập dữ liệu vào ô input thì dòng ở dưới sẽ thay đổi theo. Nếu chúng ta sử dụng javascript để thực hiện thì ta sẽ bắt sự kiện onkeypress cho input và đổi giá trị cho thẻ span. Nhưng với AngularJS thì rất đơn giản, chúng ta sẽ sử dụng Directive ng-model để khai báo model và dùng Directive ng-bind để lấy data từ model. Nhưng để hai Directives ng-model và ng-bind "biết đến nhau " thì giá trị của nó phải giống nhau nhé (ng-model="name", ng-bind="name").

Các bạn để ý rằng trong đoạn JS tôi chỉ khai báo module, controller nhưng không xử lý gì bên trong. Vậy bạn có thắc mắc là tại sao không code xử lý gì mà lại khai báo chi cho mệt? Lưu ý với bạn đấy là điều bắt buộc nhé, nghĩa là ta phải khai báo để AngularJS hiểu, nếu không nó sẽ báo lỗi đấy.

2. Danh sách AngularJS Directives

Nói đến danh sách Directives trong AngularJS thì mình không thể kể ra hết được, để xem được hết danh sách bạn lên trang chủ Angular API để đọc nhé. Trong bài này mình chỉ nêu ra một vài ví dụ đơn giản cho các bạn dễ hiểu hơn thôi.

ng-app

Khi chúng ta khai báo một Directive ng-app thì AngularJS sẽ hiểu là bắt đầu một ứng dụng Angular, nó sẽ xác định đây là thẻ gốc (element root) và tiếp theo sẽ khởi tạo các thông số cấu hình bên trong mà ta gọi là bootstraps. Ngoài ra ng-app còn được sử dụng để mô tả các module khác nhau trong ứng dụng. Về ví dụ thì chúng ta demo rất nhiều rồi nên tôi không trình bày thêm về nó nũa.

ng-init

Trong lập trình hướng đối tượng thì chúng ta có khái niệm hàm khởi tạo (constructor), thì ng-init cũng vậy, nó có ý nghĩa là khai báo dữ liệu khởi tạo khi ứng dụng vừa được chạy. Các dữ liệu này sẽ được dùng cho toàn bộ phạm vi của controller mà nó thuộc về. Ví dụ:

XEM DEMO

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script language="javascript">
                angular.module('myapp', [])
                .controller('MyController', ['$scope', function($scope) {}]);
        </script>
    </head>
    <body ng-app="myapp">
       <div ng-controller="MyController">
            <div my-customer ng-init="demo='Nội dung'">{{demo}}</div>
            {{demo}}
        </div>
        {{demo}}
    </body>
</html> 

Giao diện: Các bạn thấy rõ ràng mình khai báo ba vị trí khác nhau với cùng key là demo ({{demo}}) nhưng chỉ có hai vị trí nhận được dữ liệu, lý do đơn giản là vị trí cuối cùng năm ngoài Controller của data-init nên không thể nhận được.

ng-...

Còn rất nhiều nữa nhưng bài này mình chỉ mang tính chất giới thiệu nên sẽ không nói thêm về vụ này nữa, chúng ta sẽ lần lượt tìm hiểu từng Directives cụ thể trong các bài sau nhé.

3. Tự định nghĩa Directives

Cái này thú vị nhất nè, lúc trước mình cứ nghĩ là danh sách AngularJS Directives là cố đinh, điều này là một sai lầm nhé. Nghĩa là ngoài các Directives mặc định có sẵn trong Angular thì chúng ta có thể tự tạo được. 

Ví dụ 1: Xây dựng một Directive xuất hiện lời chào với nội dung "Chào mừng các bạn đến với website Hoidapcode.com".

XEM DEMO

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script language="javascript">
                angular.module('myapp', [])
                .controller('MyController', function($scope) {
                    //
                })
                .directive('myDirective', function() {
                    return {
                        template: '<h1>Chào mừng các bạn đến với website hoidapcode.com</h1>'
                    };
                });
        </script>
    </head>
    <body ng-app="myapp">
       <div ng-controller="MyController">
            <div my-directive></div>
        </div>
    </body>
</html> 

Giao diện: Trong ví dụ này mình đã xây dựng một div và khai báo nó là một Directive <div my-directive></div>. Trong đoạn code JS mình sử dụng hàm khai báo một directive là:

.directive('myDirective', function() {
    return {
        template: '<h1>Chào mừng các bạn đến với website hoidapcode.com</h1>'
    };
}); 

Trong đó myDirective tương ứng với my-directive, nghĩa là khi bạn tạo tên directive trong đoạn code JS thì tiền tố đầu tiên và tiền tố sau được nối lại và tiền tố sau viết chữ in hoa. Bên trong mình xử lý return về một object có key là template, key này chính là nội dung HTML bên trong của directive này, không tin bạn đổi giá trị return này và xem lại giao diện nhé.Ví dụ 2: Xây dựng form login bằng cách định nghĩa Directive tên my-formregister.

XEM DEMO

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script language="javascript">
                angular.module('myapp', [])
                .controller('MyController', function($scope) {
                    //
                })
                .directive('myFormregister', function() {
             
                    var html = '<table>';
                        html += '<tr>';
                            html += '<td>Username:</td>';
                            html += '<td><input type="text"/></td>';
                        html += '</tr>';
                        html += '<tr>';
                            html += '<td>Password:</td>';
                            html += '<td><input type="password"/></td>';
                        html += '</tr>';
                        html += '<tr>';
                            html += '<td></td>';
                            html += '<td><input type="Button" value="Login"/></td>';
                        html += '</tr>';
                    html += '</table>';
                     
                    return {
                        template: html
                    };
                });
        </script>
    </head>
    <body ng-app="myapp">
       <div ng-controller="MyController">
            <div my-formregister></div>
        </div>
    </body>
</html>

Giao diện::

Rất rõ ràng phải không nào, sự khác biệt so với ví dụ 1 là đoạn code trong javascript return về mã html form login.

4. Lời kết

Tương tự như phần Scope thì chúng ta sẽ ngưng tại đây nhé, không nên đọc nhiều nội dung quá trong một bài vì bạn sẽ khó nhớ đến nó, hãy học thật chắc, nhớ thật dai và đi theo từng bước, hãy học đi rồi học chạy nhé.

Hy vọng với bài viết về Ví dụ về Directives 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!