Bài 20: Directive ng-include trong AngularJS

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é.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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://freetuts.net' "></div>

Trong đó đường dẫn freetuts.net 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.html và index.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.

Bài viết này được đăng tại [free tuts .net]

File template-a.html

<h2 style="border:solid 1px red; margin: 10px;">
    CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET <BR/>
    ĐÂY LÀ TEMPLATE-A
</h2><br />
<br />
<br />

File template-b.html

<h2 style="border:solid 1px red; margin: 10px;">
    CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET <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 Freetuts.net</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: thehalfheart@gmail.com
             * Website: freetuts.net
             */
            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:

vi-du-ng-include-trong-angular-js

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 freetuts.net" 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 Freetuts.net</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: thehalfheart@gmail.com
             * Website: freetuts.net
             */
            angular.module('ngInit', []).controller('myController', ['$scope', function($scope) {     
                    $scope.message = 'CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET';
            }]);
        </script>
    </head>
    <body ng-app="ngInit" ng-author="thehalfheart@gmail.com" ng-website="freetuts.net">
        <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

Bài trước Bài tiếp

Cùng chuyên mục:

Tích hợp thư viện và module bằng Bower và npm vào Angular

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Two way data binding trong Angularjs

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Security trong AngularJS và cách sử dụng đơn giản

Tối ưu hóa hiệu suất trong AngularJS

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Tạo hiệu ứng với ngAnimate trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng service trong AngularJS

Tạo và sử dụng directive trong AngularJS

Interceptors và Http Service trong Angular

Sử dụng Custom Directives trong AngularJS

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…