Ví dụ Directive ng-include trong AngularJS

Ví dụ Directive ng-include 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ụ Directive ng-include 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.

Nếu bạn là dân lập trình PHP thì bạn cũng biết hàm include hay hàm required trong PHP dùng để import một file PHP khác vào file hiện tại. Đây là phía Server, vconf phía client thì như thế nào? Thông thường chúng ta sẽ sử dụng ajax hoặc là iframe để xử lý vấn đề này. Tuy nhiên nếu sử dụng angular thì bạn sẽ có một cách đơn giản hơn đó là sử dụng đối tượng directive ng-include. Chi tiết thế nào thì chúng ta sẽ tìm hiểu nhé.

1. Directive ng-include trong Angularjs

Để import một file (url web) nào đó vào trong một vị trí nào đó thì tại ví trí đó chúng ta sẽ sử dụng một đoạn code sau:

<div ng-include=" 'https://Hoidapcode.com' "></div>Trong đó đường dẫn Hoidapcode.com chính là đường dẫn trỏ đến file cần import. Lưu ý với bạn là phải có dấu nháy đơn bao quanh URL lại nhé, nếu không sẽ bị báo lỗi đấy.

Ví dụ: Cho file template-a.html, template-b.htmlindex.html. Hãy sử dụng ng-include để import hai file template vào file index.

Để giải bài này ta sẽ làm các bước như sau.

File template-a.html

File template-a.html
<h2 style="border:solid 1px red; margin: 10px;">
    CHÀO MỪNG CÁC BẠN ĐẾN VỚI hoidapcode.com <BR/>
    ĐÂY LÀ TEMPLATE-A
</h2>
File template-b.html
<h2 style="border:solid 1px red; margin: 10px;">
    CHÀO MỪNG CÁC BẠN ĐẾN VỚI hoidapcode.com <BR/>
    ĐÂY LÀ TEMPLATE-B
</h2>
File index.html
<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-include hoidapcode.com</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <style>
            *{margin:0;padding:0}
            body{margin:20px;}
        </style>
        <script>
            /*
             * Author: hoidapcode@gmail.com
             * Website: hoidapcode.com
             */
            angular.module('ngInit', []).controller('myController', ['$scope', function($scope) {        
            }]);

Hai template chỉ có nhiệm vụ là hiển thị một đoạn text thôi, còn file index.html thì có nhiệm vụ import hai file kia vào. Chạy lên giao diện sẽ như sau:

2. Các file được include có nhận được biến của $sope hay không ?

Đây là câu hỏi mà chắc chắn bạn phải hỏi đấy nhé, nếu bạn không hỏi thì bạn sẽ không hiểu được toàn bộ directive ng-include này. Nếu như bạn để ý kỹ bằng cách bật firebug lên thì bạn sẽ thấy bản chất khi AngularJS import các template vào là nó đang sử dung ajax đấy nhé, và khi nhận kết quả nó sẽ xử lý các biểu thức khai báo trong kết quả đó, nếu có khai báo mã AngularJS và sử dụng các biến trong $scope thì nó vẫn nhận bình thường.

Bây giờ để các bạn hiểu rõ hơn thì ta làm lại ví dụ trên nhé, ở cả  hai template câu chào "Chào mừng các bạn đến với Hoidapcode.com" sẽ được truyền tử giá trị $scope được gán trong controller. Chi tiết ta sẽ làm như sau:

File template-a.html	
<h2 style="border:solid 1px red; margin: 10px;">
    {{message}} <BR/>
    ĐÂY LÀ TEMPLATE-A
</h2>
File template-b.html
	
<h2 style="border:solid 1px red; margin: 10px;">
    {{message}} <BR/>
    ĐÂY LÀ TEMPLATE-B
</h2>
File index.html
<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-include hoidapcode.com</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <style>
            *{margin:0;padding:0}
            body{margin:20px;}
        </style>
        <script>
            /*
             * Author: hoidapcode@gmail.com
             * Website: hoidapcode.com
             */
            angular.module('ngInit', []).controller('myController', ['$scope', function($scope) {     
                    $scope.message = 'CHÀO MỪNG CÁC BẠN ĐẾN VỚI hoidapcode.com';
            }]);
        </script>
    </head>
    <body ng-app="ngInit" ng-author="thehalfheart@gmail.com" ng-website="hoidapcode.com">
        <div ng-controller="myController">
            <div ng-include=" 'template-a.html' "></div>
            <div ng-include=" 'template-b.html' "></div>
        </div>
    </body>
</html>

Chạy lên kết quả vẫn giống như ví dụ trước.

3. Lời kết

Vẫn còn vài phần nâng cao nữa đó là các tham số và events của ng-include nhưng mình sẽ không trình bày ở bài này mà sẽ trình bày nó ở một bài khác vì nếu đưa vào bài này luôn bạn sẽ loạn đấy, mình không muốn bạn bị loạn và ngừng xem tuts của mình đâu :D

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