Tạo Directives trong angularjs

Bài đăng này đã không được cập nhật trong 2 năm

1. Angularjs là gì?

Bạn chưa biết về angularjs? Bạn mới học về angularjs? Bạn đã biết về angularjs nhưng bạn chưa biết cách tự định nghĩa 1 directives? Vậy thì cùng nhau, qua bài viết này, chúng ta sẽ tìm hiểu về cách tạo directive trong Angularjs nhé.

AngularJS là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào.

2. Directives trong angularjs

Directives trong angularjs được bắt đầu với tiền tố "ng-" dùng để kế thưa html. Trước khi đi vào mục tiêu chính là tự định nghĩa 1 directives thì ở dưới đây mình sẽ giới thiệu về những directives của angularjs, chúng gồm có:

ng-app - Directive để bắt đầu một ứng dụng AngularJS.
ng-init - Directive để khởi tạo dữ liệu cho ứng dụng.
ng-model - Directive định nghĩa model như là một biến có thể sử dụng trong AngularJS.
ng-repeat - Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.

Những lý thuyết liên quan đến phần này thì đã có rất nhiều tài liệu giới thiệu và hướng dẫn cách sử dụng. Ở bài viết này chỉ tập trung làm 1 vài ví dụ để làm giúp dễ hình dung hơn về việc định nghĩa 1 directives như thế nào.

3. Directives tự định nghĩa

Ví dụ: Tạo ective in ra dòng chữ "Hello World"

Để làm được điều này, trước hết:

Định nghĩa mainApp với controller là TestController

var mainApp = angular.module('mainApp', [])
    .controller('TestController', function($scope) {
        //
    })

Tạo 1 directives tên là testDirective

mainApp.directive('testDirective', function() {
    return {
        template: '<h1>Hello World</h1>'
    };
});

Bên trong Directive return về 1 object với key là template, key này sẽ render view là đoạn html được định nghĩa ở bên trong nó. Chúng ta cũng có thể viêt là:

mainApp.directive('testDirective', function() {
             
    var html = "<h1>Hello World</h1>'';

    return {
        template: html
    };
});

hoặc là tạo 1 file test-directive.html và gọi nó như sau:

mainApp.directive('testDirective', function() {
    return {
        template: 'test-directive.html'
    };
});

Sau đó thì tạo 1 file test-directive.html để viết đoạn code '

Hello World

' vào trong đó. Tùy từng trường hợp mà bạn có thể chọn cách viết directive sao cho phù hợp. Và cuối cùng là việc gọi ra template này để hiển thị Tạo view để gọi đến test-directive

<body ng-app="mainApp">
   <div ng-controller="TestController">
        <div test-directive></div>
    </div>
</body>

testDirective sẽ được gọi tương ứng với test-directive trong view

Kết quả

Để dễ hiểu hơn, thì chúng ta cũng có thể hiểu việc gọi directive trên view giống với việc render 1 đoạn html đã được định nghĩa sẵn trước đó, giống như khi làm với rails chúng ta hay sử dụng '_form.html.erb' sau đó thì render ''form'' điều này giúp không phải viết đi viết lại đoạn html ở trong _form.html.erb.

Giả sử chúng ta có 2 page view đều muốn sử dụng test-directive.html, nhưng muốn hiển thị nội dung khác nhau thì sẽ làm như thế nào?

Giống như ở rails, chúng ta có thể truyền biến vào _view.html.erb và sử dụng biến đó tùy theo mục đích sử dụng thì ở directives ta cũng có thể truyền biến như vậy

mainApp.directive('testDirective', function() {
    return {
        scope: {
             testEnable: "="
        },
        template: '<h1>Hello World</h1>'
    };
});

Như vậy là ta đã có 1 biến test-enable để sử dụng:

<body ng-app="mainApp">
   <div ng-controller="TestController">
       <test-directive test-enable='true'></test-directive>
    </div>
</body>

Như vậy trong test-directive.html ta có test-enable để sử dụng cho tùy theo hoàn cảnh khác nhau.

4. Kết Luận:

Derective có rất nhiều ưu điểm, và nổi bật là giúp chúng ta có thể viết chung những function, html vào 1 directive và dùng chung ở nhiều page view khác nhau, mà không cần phải viết lại. Điều đó giúp code sạch đẹp, dễ hiểu.

Angularjs là 1 framework nổi tiếng và ưu điểm của nó thì đã được ca ngợi bởi rất nhiều người, trên rất nhiều diễn đàn... Bởi thế thật lãng phí nếu như chúng ta không thử tìm hiểu về nó. Qua bài viết này, mình đã hướng dẫn cách để tự định nghĩa 1 directive để sử dụng khi làm webview

5. Tài liệu tham khảo

https://docs.angularjs.org/guide/directive http://www.tutorialsteacher.com/angularjs/what-is-angularjs