AngularJS ng-include: Bao gồm các tệp HTML với ví dụ
James Hartman
⚡ Tóm tắt thông minh
Trong AngularJS, ng-include sẽ tải về, biên dịch và chèn một đoạn HTML bên ngoài vào trang chính, do đó các mã đánh dấu được chia sẻ như bảng, tiêu đề hoặc chân trang nằm trong một tệp con có thể tái sử dụng.
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 ngôn ngữ lập trình chẳng hạn như .Net và Java.
Hướng dẫn này xem xét các cách khác để xử lý các tập tin (các tập tin chứa nội dung bên ngoài). HTML (mã) có thể được đưa vào tệp HTML chính.
Phía máy khách bao gồm
Một trong những cách phổ biến nhất để chèn mã HTML là thông qua JavaKịch bản. 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, JavaTập lệnh cũng có thể được sử dụng để chèn mã từ các tệp khác.
Các bước dưới đây minh họa 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,
- 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.
- Có một tham chiếu đến một đoạn mã jQuery. jQuery là một ngôn ngữ lập trình kịch bản được xây dựng trên nền tảng của... JavaĐoạn mã giúp việc thao tác DOM trở nên dễ dàng hơn.
- Trong tạp chí JavaHàm Script có 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 là Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
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.
- Đầu trang
- Cuối trang
- Chức năng điều hướng.
Để máy chủ web nhận diện được Server Side Include (SIDE), tên tệp phải có các phần mở rộng đặc biệt. Chúng thường được máy chủ web chấp nhận, ví dụ như .shtml, .stm, .shtm, .cgi.
Chỉ thị được sử dụng để bao gồm nội dung là "chỉ thị include". Một ví dụ về chỉ thị 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
AngularJS Cung cấp chức năng để tích hợp các chức năng từ các tệp AngularJS khác bằng cách sử dụng ng-include. Chỉ thị.
Mục đích chính của chỉ thị “ng-include” là tải về, biên dịch và chèn một đoạn mã HTML bên ngoài vào ứng dụng AngularJS chính.
Ghi chú phiên bản: AngularJS 1.x đã ngừng hỗ trợ dài hạn vào ngày 31 tháng 12 năm 2021, và nhóm phát triển framework cho biết rằng Việc hỗ trợ AngularJS đã chính thức kết thúc. Vào tháng 1 năm 2022, vì vậy không có bản phát hành hoặc bản vá bảo mật nào tiếp theo. Mọi bước và khối mã bên dưới đều được giữ nguyên như đã công bố, như một tài liệu tham khảo lịch sử. Angular hiện đại không có bản thay thế trực tiếp: mã đánh dấu được tạo thành từ các thành phần, và một đoạn mã được chọn trong thời gian chạy sẽ được hiển thị. ng-container và ngComponentOutlet.
Hãy cùng xem đoạn mã bên dưới và giải thích cách thực hiện điều này bằng AngularJS.
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ã bên dưới giả định rằng có một biến phạm vi tên là “tutorial”. Sau đó, nó sử dụng ng-lặp lại chỉ thị này sẽ duyệt qua từng chủ đề trong biến “tutorial” và hiển thị các giá trị cho 'Name' và 'Descriptcặp khóa-giá trị ion'.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</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 AngularJS đơn giản với các khía cạnh sau:
- 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'.
- Trong tạp chí điều khiểnMột biến “tutorial” được tạo ra như một phần của đối tượng $scope. Biến này chứa một 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à
- 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ị.
- 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:
Ảnh chụp màn hình bên dưới hiển thị kết quả đã được hiển thị: tab trình duyệt có tiêu đề Đăng ký sự kiện, tiêu đề nằm phía trên bảng được chèn và ba hàng được lấy từ mảng hướng dẫn trong Main.html thông qua partial. Ảnh chụp màn hình được chú thích viết tiêu đề là Gur99 trong khi mã viết Guru99.
Thuộc tính ng-include: src, onload và autoscroll
Ngoài tên tệp, chỉ thị này chấp nhận hai thuộc tính tùy chọn và có thể được viết theo ba cách: dưới dạng thuộc tính trên bất kỳ phần tử nào, dưới dạng một <ng-include> phần tử, hoặc dưới dạng lớp CSS. Tài liệu tham khảo bên dưới tuân theo tài liệu chính thức. Tài liệu ngInclude.
| đặc tính | Yêu cầu | Những gì nó |
|---|---|---|
| src, hoặc ng-include | Có | Biểu thức được đánh giá thành mẫu URL |
| đang tải | Không | Biểu thức được đánh giá mỗi khi một phần tải mới hoàn tất. |
| cuộn tự động | Không | Hàm này gọi biến `$anchorScroll` sau khi nội dung được tải xong; việc bỏ qua thuộc tính này sẽ vô hiệu hóa chức năng cuộn. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Lỗi thường gặp nhất bắt nguồn từ hàng đầu tiên: src mất một biểu hiệnKhông phải là một chuỗi ký tự thông thường. Do đó, một đường dẫn theo nghĩa đen cần có dấu ngoặc kép riêng bên trong thuộc tính, đó là lý do tại sao ví dụ trên lại có dạng như vậy. ng-include="'Table.html'". Viết ng-include="Table.html" khiến AngularJS đánh giá Table Với tư cách là thuộc tính phạm vi, không tìm thấy gì và để phần tử trống.
Vì sao ng-include tạo ra một phạm vi con mới
Chỉ thị này không dán mã đánh dấu vào phạm vi xung quanh. Mỗi lần bao gồm sẽ tạo ra một phần tử con mới. phạm vi Nó kế thừa nguyên mẫu từ phạm vi mà nó được khai báo, và thực tế đó giải thích hầu hết các điều bất ngờ về ràng buộc.
Chức năng đọc hoạt động như mong đợi. Đoạn văn trên có nội dung như sau: tutorial Trực tiếp từ cha mẹ, đó là lý do tại sao ng-repeat tìm thấy mảng. Vấn đề nằm ở chỗ khi viết: khi một phần gán giá trị cho một kiểu dữ liệu nguyên thủy, như với ng-model="topic"AngularJS tạo ra topic Trên phạm vi con, bản sao gốc không bao giờ thay đổi.
Có hai thói quen giúp tránh được cạm bẫy này:
- Liên kết thông qua một đối tượng, như trong
ng-model="data.topic"Như vậy, cha mẹ và con cái cùng đạt đến một mốc tham chiếu. - Hãy lưu trữ trạng thái trong bộ điều khiển hoặc dịch vụ và cung cấp các hàm thay vì chỉ cung cấp các kiểu dữ liệu cơ bản.
Bao gồm cả việc phát ra $includeContentRequested, $includeContentLoaded và $includeContentError, vì vậy cha mẹ có thể phản ứng thông qua $scope.$on mà không hề can thiệp vào phạm vi trẻ em.
Cách khắc phục lỗi ng-include trống hoặc không thành công
Một lệnh include không tạo ra nội dung gì thường thất bại vì một trong số ít lý do. Hãy xem xét chúng theo thứ tự này.
- Kiểm tra báo giá. Tên tệp tin theo nghĩa đen cần có dấu ngoặc đơn bên trong giá trị thuộc tính. Nếu không có chúng, biểu thức sẽ trả về giá trị không xác định và không có yêu cầu nào được gửi đi.
- Tải trang thông qua giao thức HTTP. Chỉ thị này phát ra yêu cầu XHR cho phần tử con, vì vậy việc mở Main.html trực tiếp từ ổ đĩa thông qua địa chỉ tệp sẽ thất bại trong hầu hết các trình duyệt. Bất kỳ máy chủ web cục bộ nào cũng có thể khắc phục điều này.
- Xác nhận đường dẫn đã được giải quyết. Hãy theo dõi bảng điều khiển mạng để xem yêu cầu. Lỗi 404 có nghĩa là đường dẫn là tương đối so với trang chứa lệnh include, chứ không phải so với phần tử con tham chiếu đến lệnh đó.
- Hãy tôn trọng quy tắc cùng nguồn gốc. Theo mặc định, mẫu URL phải khớp với tên miền và giao thức của tài liệu ứng dụng, vì AngularJS truyền nó qua đó. $sce.getTrustedResourceUrlMẫu từ nguồn khác cần có một mục trong nguồn đáng tin cậy. URL danh sách, hoặc một trình bao bọc trustAsResourceUrl rõ ràng, và máy chủ từ xa vẫn phải gửi tiêu đề CORS.
- Hãy lắng nghe tiếng thất bại. Biến $includeContentError được kích hoạt bất cứ khi nào trạng thái phản hồi nằm ngoài phạm vi 200 đến 299, biến một vùng trống không được ghi chú thành một thông báo cần được lưu vào nhật ký.
Một nguyên nhân khác dễ bị bỏ qua. AngularJS lưu trữ mọi partial đã được tải về trong `$templateCache`, vì vậy một tệp đã chỉnh sửa có thể tiếp tục sử dụng mã HTML cũ cho đến khi mục nhập bộ nhớ cache bị xóa hoặc trang được tải lại từ mã nguồn. Khi một fragment cần hành vi riêng của nó chứ không chỉ là mã HTML đơn thuần, thì... chỉ thị tùy chỉnh Công cụ có mẫu riêng và phạm vi hoạt động độc lập là công cụ tốt hơn.
