ANGULARJS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

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

<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

Cùng chuyên mục:

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

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

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

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ề…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Top