Ng-include trong AngularJS: Cách bao gồm tệp HTML (Ví dụ)

Mục lục:

Anonim

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

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 bằng cách chỉ bao gồm tệp đó.

Đây thường là khái niệm về câu lệnh Bao gồm 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 mà tệp (tệp chứa mã HTML bên ngoài) có thể được đưa vào tệp HTML chính.

Trong hướng dẫn này, bạn sẽ học-

  • Phía khách hàng bao gồm
  • Phía máy chủ bao gồm
  • Cách đưa tệp HTML vào AngularJS

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

Một trong những cách phổ biến nhất là bao gồm mã HTML là thông qua Javascript. JavaScript là một ngôn ngữ lập trình có thể được sử dụng để điều khiển nội dung trong trang HTML một cách nhanh chóng. Do đó, 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 này có thể được thực hiện.

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

Đây là một tập tin bao gồm

Bước 2) Tạo một tệp có tên Sample.html, 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à các khía cạnh chính cần lưu ý về mã dưới đây,

  1. Trong thẻ body, có một 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 một 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 giúp thao tác DOM trở nên dễ dàng hơn.
  3. Trong hàm Javascript, có một câu lệnh '$ ("# Content"). Load ("Sub.html");' khiến mã trong tệp Sub.html được chèn vào thẻ div có id Nội dung.

Phía máy chủ bao gồm

Máy chủ Phía bao gồm 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ần bao gồm phía Máy chủ, 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.

Chỉ thị được sử dụng để bao gồm nội dung là "chỉ thị bao gồm". Dưới đây là một ví dụ về chỉ thị bao gồm;

  • Chỉ thị trên cho phép đưa nội dung của tài liệu này vào tài liệu khác.
  • Lệnh "ảo" ở trên được sử dụng để chỉ định mục tiêu liên quan đến tên miền gốc của ứng dụng.
  • Ngoài ra, đối với tham số ảo, cũng có tham số tệp có thể được sử dụng. Các tham số "tệp" được sử dụng khi cần chỉ định đường dẫn liên quan đến thư mục của tệp hiện tại.

Ghi chú:

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 bao gồm sẽ không thành công. Từ 'ảo' là một từ khóa bắt buộc phải đặt trong chỉ thị 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 chỉ thị ng-include.

Mục đích chính của "chỉ thị ng-include" được sử dụng để tìm nạp, biên dịch và bao gồm một đoạn HTML bên ngoài trong ứ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) chúng ta hãy viết đoạn mã dưới đây vào một tệp có tên là 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 cách sử dụ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 chỉ thị ng-repeat, đ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ị 'tên' và 'mô tả'.


 {{Topic.Name}}  {{Topic.Country}}

Bước 2) chúng ta 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.JS góc cạnh đơn giản có các khía cạnh sau

  1. Sử dụng "chỉ thị ng-include" để đưa mã vào tệp bên ngoài 'Table.html'. Câu lệnh đã được tô đậ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, một 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ị chính là

  1. Tên - Tên 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. Mô tả - Điều 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'.

 Đăng ký sự kiện 


Sự kiện toàn cầu Guru99

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

Đầu ra :

Tóm lược:

  • Theo mặc định, chúng ta biết rằng HTML không cung cấp một cách trực tiếp để bao gồm nội dung HTML từ các tệp khác như các ngôn ngữ lập trình khác.
  • Javascript cùng với JQuery là tùy chọn ư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 nội dung HTML từ các tệp 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 cơ sở để bao gồm các tệp bằng cách sử dụng chỉ thị ng-include. Chỉ thị này có thể được sử dụng để đưa mã từ các tệp bên ngoài trực tiếp vào tệp HTML chính.