ng-include trong AngularJS: Cách bao gồm tệp HTML [Ví dụ]

Bởi: James Hartman James Hartman
Hours cập nhật

Theo mặc định, HTML không cung cấp phương tiện để bao gồm mã phía máy khách từ các tệp khác. Thông thường, trong bất kỳ ngôn ngữ lập trình nào, việc phân phối chức năng trên nhiều tệp khác nhau cho bất kỳ ứng dụng nào là một cách thực hành tốt.

Ví dụ: nếu bạn có logic cho các phép toán số, thông thường bạn sẽ muốn xác định chức năng đó trong một tệp riêng biệt. Sau đó, tệp riêng biệt đó có thể được sử dụng lại trên nhiều ứng dụng chỉ bằng cách đưa tệp đó vào.

Thông thường đây là khái niệm về Bao gồm các câu lệnh có sẵn trong các ngôn ngữ lập trình như .Net và Java.

Hướng dẫn này xem xét các cách khác để đưa các tệp (tệp chứa mã HTML bên ngoài) vào tệp HTML chính.

Phía khách hàng bao gồm

Một trong những cách phổ biến nhất là đưa mã HTML vào thông qua Javascript. JavaScript là ngôn ngữ lập trình có thể được sử dụng để thao tác nội dung trong trang HTML một cách nhanh chóng. Kể từ đây, Javascript cũng có thể được sử dụng để bao gồm mã từ các tệp khác.

Các bước dưới đây cho thấy cách thực hiện điều này.

Bước 1) Xác định một tệp có tên là Sub.html và thêm đoạn mã sau vào tệp.

<div>
	This is an included file
</div>

Bước 2) Tạo một tệp có tên Sample.html, đây là tệp ứng dụng chính của bạn và thêm đoạn mã bên dưới.

Dưới đây là những khía cạnh chính cần lưu ý về đoạn mã dưới đây,

  1. Trong thẻ body có thẻ div có id là Nội dung. Đây là nơi mã từ tệp bên ngoài 'Sub.html' sẽ được chèn vào.
  2. Có một tham chiếu đến tập lệnh jquery. JQuery là một ngôn ngữ kịch bản được xây dựng dựa trên Javascript điều này làm cho thao tác DOM trở nên dễ dàng hơn.
  3. Trong tạp chí Javascript hàm, có một câu lệnh '$(“#Content”).load(“Sub.html”);' điều này khiến mã trong tệp Sub.html được đưa vào thẻ div có id là Nội dung. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

NHỮNG BÀI VIẾT LIÊN QUAN

Server Side Bao gồm

Bao gồm phía máy chủ cũng có sẵn để bao gồm một đoạn mã chung trên toàn bộ trang web. Điều này thường được thực hiện để đưa nội dung vào các phần bên dưới của tài liệu HTML.

  1. Đầu trang
  2. Cuối trang
  3. Chức năng điều hướng.

Để máy chủ web nhận ra Phía máy chủ Bao gồm, tên tệp có phần mở rộng đặc biệt. Chúng thường được máy chủ web chấp nhận như .shtml, .stm, .shtm, .cgi.

Lệnh được sử dụng để bao gồm nội dung là “chỉ thị include”. Một ví dụ về lệnh include được hiển thị bên dưới;

<!--#include virtual="navigation.cgi" -->
  • Chỉ thị trên cho phép nội dung của một tài liệu được đưa vào một tài liệu khác.
  • Lệnh “ảo” ở trên mã được sử dụng để chỉ định mục tiêu liên quan đến gốc tên miền của ứng dụng.
  • Ngoài ra, đối với tham số ảo, còn có tham số tệp có thể được sử dụng. Các tham số “tệp” được sử dụng khi người ta cần chỉ định đường dẫn liên quan đến thư mục của tệp hiện tại.

Lưu ý:

Tham số ảo được sử dụng để chỉ định tệp (trang HTML, tệp văn bản, tập lệnh, v.v.) cần được đưa vào. Nếu quy trình máy chủ web không có quyền truy cập để đọc tệp hoặc thực thi tập lệnh, lệnh include sẽ không thành công. Từ 'ảo' là một từ khóa bắt buộc phải được đặt trong lệnh include.

Cách đưa tệp HTML vào AngularJS

Angular cung cấp chức năng bao gồm chức năng từ các tệp AngularJS khác bằng cách sử dụng lệnh ng-include.

Mục đích chính của “lệnh ng-include” được sử dụng để tìm nạp, biên dịch và đưa một đoạn HTML bên ngoài vào ứng dụng AngularJS chính.

Hãy xem cơ sở mã bên dưới và giải thích cách có thể đạt được điều này bằng Angular.

Bước 1) hãy viết đoạn mã dưới đây vào một tệp có tên Table.html. Đây là tệp sẽ được đưa vào tệp ứng dụng chính của chúng tôi bằng lệnh ng-include.

Đoạn mã dưới đây giả định rằng có một biến phạm vi được gọi là “hướng dẫn”. Sau đó, nó sử dụng lệnh ng-repeat, lệnh này đi qua từng chủ đề trong biến “Hướng dẫn” và hiển thị các giá trị cho cặp khóa-giá trị 'name' và 'description'.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Bước 2) hãy viết đoạn mã dưới đây vào một tệp có tên là Main.html. Đây là một ứng dụng angular.JS đơn giản có các khía cạnh sau

  1. Sử dụng “lệnh ng-include” để chèn mã vào tệp bên ngoài 'Table.html'. Tuyên bố đã được đánh dấu in đậm trong đoạn mã dưới đây. Vì vậy thẻ div ' ' sẽ được thay thế bằng toàn bộ mã trong tệp 'Table.html'.
  2. Trong bộ điều khiển, biến “hướng dẫn” được tạo như một phần của đối tượng $scope. Biến này chứa danh sách các cặp khóa-giá trị.

Trong ví dụ của chúng tôi, các cặp giá trị khóa là

  1. Tên – Điều này biểu thị tên của một chủ đề như Bộ điều khiển, Mô hình và Chỉ thị.
  2. Description – Phần này cung cấp mô tả về từng chủ đề

Biến hướng dẫn cũng được truy cập trong tệp 'Table.html'.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

Khi bạn thực thi đoạn mã trên, bạn sẽ nhận được kết quả sau.

Đầu ra:

Bao gồm tệp HTML trong AngularJS

Tổng kết

  • Theo mặc định, chúng tôi biết rằng HTML không cung cấp cách trực tiếp để đưa nội dung HTML từ các tệp khác như các tệp khác vào. ngôn ngữ lập trình.
  • Javascript cùng với JQuery là tùy chọn được ưu tiên nhất để nhúng nội dung HTML từ các tệp khác.
  • Một cách khác để bao gồm HTML nội dung từ các tập tin khác là sử dụng chỉ thị và từ khóa tham số ảo. Từ khóa tham số ảo được sử dụng để biểu thị tệp cần được nhúng. Điều này được gọi là bao gồm phía máy chủ.
  • Angular cũng cung cấp phương tiện để include các file bằng cách sử dụng lệnh ng-include. Lệnh này có thể được sử dụng để chèn mã từ các tệp bên ngoài trực tiếp vào tệp HTML chính.

Bạn có thể thích: