AngularJS ng-include：包含 HTML 文件示例
詹姆斯·哈特曼
默认情况下，HTML 不提供从其他文件包含客户端代码的功能。在任何编程语言中，将功能分布到任何应用程序的各个文件中通常是一种很好的做法。
例如，如果您有数字运算逻辑，您通常希望在一个单独的文件中定义该功能。然后只需包含该文件，即可在多个应用程序中重复使用该文件。
这通常是 Include 语句 可在以下情况下获得： 编程语言 例如 .Net 和 Java.
本教程将探讨其他处理文件的方式（包含外部文件的文件）。 HTML 代码）可以包含在主 HTML 文件中。
客户端包括
包含 HTML 代码最常见的方法之一是通过…… Java脚本。 JavaScript 是一种编程语言，可用于动态操作 HTML 页面中的内容。因此， Java脚本还可以用来包含其他文件中的代码。
以下步骤展示了如何实现这一目标。
步骤1） 定义一个名为Sub.html的文件，并在文件中添加以下代码。
<div> This is an included file </div>
步骤2） 创建一个名为 Sample.html 的文件，它是您的主应用程序文件，并添加以下代码片段。
以下是关于以下代码需要注意的主要方面，
- 在 body 标签中，有一个 div 标签，其 id 为 Content。这是将插入外部文件“Sub.html”的代码的位置。
- 这里提到了 jQuery 脚本。jQuery 是一种基于 JavaScript 的脚本语言。 Java让 DOM 操作变得更加简单的脚本。
- 在 Java脚本函数中有一条语句“$(“#Content”).load(“Sub.html”);”，它会导致将 Sub.html 文件中的代码注入到 id 为 Content 的 div 标签中。
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
服务器端包括
服务器端包含也可用于包含整个站点的通用代码片段。这通常用于包含 HTML 文档以下部分中的内容。
- 页眉
- 页脚
- 导航菜单。
为了让 Web 服务器识别服务器端包含文件，文件名需要有特殊的扩展名。Web 服务器通常接受的扩展名包括 .shtml、.stm、.shtm 和 .cgi。
用于包含内容的指令是“include 指令”。以下是一个 include 指令的示例：
<!--#include virtual="navigation.cgi" -->
- 上述指令允许将一个文档的内容包含在另一个文档中。
- 上面代码中的“虚拟”命令用于指定相对于应用程序域根目录的目标。
- 此外，除了虚拟参数之外，还有文件参数可以使用。当需要指定相对于当前文件目录的路径时，使用“文件”参数。
注意：
virtual 参数用于指定需要包含的文件（HTML 页面、文本文件、脚本等）。如果 Web 服务器进程无权读取文件或执行脚本，则 include 命令将失败。'virtual' 一词是必须放在 include 指令中的关键字。
如何在 AngularJS 中包含 HTML 文件
AngularJS 提供通过使用 ng-include 指令来引入其他 AngularJS 文件的功能。 指示.
“ng-include 指令”的主要目的是获取、编译并将外部 HTML 片段包含到主 AngularJS 应用程序中。
版本说明： AngularJS 1.x 已于 2021 年 12 月 31 日停止长期支持，框架团队声明： AngularJS 支持正式结束 2022 年 1 月，Angular 正式发布，因此不会再发布任何版本或安全补丁。以下每个步骤和代码块都与发布时完全一致，作为历史参考。现代 Angular 没有直接的替代方案：标记由组件构成，并在运行时选择片段进行渲染。 ng-container 和 ngComponentOutlet.
让我们来看一下下面的代码库，并解释如何使用 AngularJS 实现这一点。
步骤1） 让我们在名为 Table.html 的文件中编写以下代码。该文件将使用 ng-include 指令注入到我们的主要应用程序文件中。
以下代码片段假设存在一个名为“tutorial”的作用域变量。然后它使用 ng-重复 该指令遍历“tutorial”变量中的每个主题，并显示“名称”和“Description'键值对。
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
步骤2） 让我们把以下代码写入名为 Main.html 的文件中。这是一个简单的 AngularJS 应用程序，它包含以下几个方面。
- 使用“ng-include 指令”将代码注入外部文件“Table.html”。该语句已在下面的代码中以粗体突出显示。因此 div 标签 ' ‘ 将被“Table.html”文件中的整个代码替换。
- 在 调节器在 $scope 对象中创建了一个名为“tutorial”的变量。该变量包含一个键值对列表。
在我们的示例中，键值对是
- 名称——表示主题的名称，例如控制器、模型和指令。
- Description – 给出每个主题的描述
教程变量也可以在“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>
当您执行上述代码时，您将得到以下输出。
输出:
下图显示了渲染结果：浏览器标签页标题为“活动注册”，标题位于注入的表格上方，表格中的三行数据通过局部视图从 Main.html 中的教程数组中提取。带注释的屏幕截图显示标题为 Gur99，而代码则显示为 Guru99.
ng-include 属性：src、onload 和 autoscroll
除了文件名之外，该指令还接受两个可选属性，并且可以用三种方式编写：作为任何元素的属性，作为…… <ng-include> 元素，或作为 CSS 类。以下参考遵循官方规范。 ngInclude 文档.
| 属性 | 其他要求 | 它做什么 |
|---|---|---|
| src 或 ng-include | 是 | 表达式求值为模板 URL |
| 负载 | 没有 | 表达式在每次新的局部加载完成后进行求值。 |
| 自动滚屏 | 没有 | 内容加载完毕后调用 $anchorScroll；省略该属性将禁用滚动。 |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
最常见的错误出自第一行： src 需要一个 表达，而不是普通的字符串。因此，字面路径需要在属性内用引号括起来，这就是为什么上面的示例读作： ng-include="'Table.html'"。 写作 ng-include="Table.html" 使 AngularJS 评估 Table 作为作用域属性，找不到任何内容，并将元素留空。
为什么 ng-include 会创建一个新的子作用域
该指令不会将标记粘贴到外部作用域中。每次包含操作都会创建一个新的子对象。 范围 它从声明它的作用域中继承原型，而这一事实解释了大多数绑定意外情况。
读取功能正常。以上部分内容显示为： tutorial 直接来自家长，所以…… ng-repeat 找到数组。写入操作会出错：当一个局部变量赋值给一个原始类型时，例如使用 `...` ng-model="topic"AngularJS 创建 topic 在子作用域内，父级副本永远不会改变。
两种习惯可以避免落入陷阱：
- 通过对象绑定，例如
ng-model="data.topic"这样，父子双方就能达到相同的引用。 - 将状态保存在控制器或服务中，并公开函数而不是原始基本类型。
该包含项还会发出信号。 $includeContentRequested, $includeContentLoaded 和 $includeContentError因此，父母可以通过以下方式做出反应 $scope.$on 完全没有涉及儿童领域。
如何修复空白或失败的 ng-include 指令
包含一个没有渲染任何内容的指令通常是由以下几个原因之一导致的：按以下顺序逐一排查。
- 核对报价。 文件名必须用单引号括起来，否则属性值中必须包含单引号。否则，表达式将解析为 undefined，并且不会发送任何请求。
- 通过HTTP协议提供页面服务。 该指令会发出 XHR 请求来访问局部文件，因此在大多数浏览器中，直接从磁盘通过文件地址打开 Main.html 文件会失败。任何本地 Web 服务器都会解决这个问题。
- 确认路径解析成功。 密切关注网络面板上的请求。404 错误表示路径是相对于包含该插入内容的页面而言的，而不是相对于引用该插入内容的局部视图而言的。
- 遵守同源规则。 默认情况下，模板 URL 必须与应用程序文档的域和协议匹配，因为 AngularJS 会将其传递出去。 $sce.getTrustedResourceUrl来自其他地方的模板需要在受信任资源中添加条目。 URL 列表，或者显式的 trustAsResourceUrl 包装器，远程服务器仍然需要发送 CORS 标头。
- 注意听失败的声音。 当响应状态不在 200 到 299 之间时，$includeContentError 就会触发，将原本空白的区域变成值得记录的消息。
还有一个原因很容易被忽略。AngularJS 会将每个获取到的局部模板保存在 `$templateCache` 中，因此，即使文件已被编辑，它仍然会提供过时的标记，直到缓存条目被移除或页面从源代码重新加载。当一个片段需要自身独特的行为而不仅仅是标记时，就会出现这种情况。 自定义指令 拥有自己的模板和独立作用域的工具更好。
