AngularJS 中的 ng-include：如何包含 HTML 文件 [示例]

默认情况下，HTML 不提供从其他文件包含客户端代码的功能。在任何编程语言中，将功能分布到任何应用程序的各个文件中通常是一种很好的做法。

例如，如果您有数字运算逻辑，您通常希望在一个单独的文件中定义该功能。然后只需包含该文件，即可在多个应用程序中重复使用该文件。

这通常是 Include 语句 可用于.Net 等编程语言和 Java.

本教程介绍将文件（包含外部 HTML 代码的文件）包含在主 HTML 文件中的其他方法。

客户端包括

最常见的方法之一是通过 Javascript. JavaScript 是一种编程语言，可用于动态操作 HTML 页面中的内容。因此， Javascript 也可以用于包含来自其他文件的代码。

以下步骤显示了如何实现这一点。

步骤 1) 定义一个名为Sub.html的文件，并在文件中添加以下代码。

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

步骤2） 创建一个名为 Sample.html 的文件，它是您的主应用程序文件，并添加以下代码片段。

以下是关于以下代码需要注意的主要方面，

在 body 标签中，有一个 div 标签，其 id 为 Content。这是将插入外部文件“Sub.html”的代码的位置。
这里有一个对 jQuery 脚本的引用。JQuery 是一种基于 Javascript 这使得 DOM 操作变得更加容易。

在 Javascript 函数中，有一条语句 '$(“#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 文件

Angular 提供了使用 ng-include 指令来包含来自其他 AngularJS 文件的功能。

“ng-include 指令”的主要目的是在主 AngularJS 应用程序中获取、编译和包含外部 HTML 片段。

让我们看看下面的代码库并解释如何使用 Angular 实现这一点。

步骤1） 让我们在名为 Table.html 的文件中编写以下代码。该文件将使用 ng-include 指令注入到我们的主要应用程序文件中。

下面的代码片段假设有一个名为“tutorial”的作用域变量。然后它使用 ng-repeat 指令，该指令遍历“Tutorial”变量中的每个主题并显示“name”和“description”键值对的值。

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

步骤2） 让我们在名为 Main.html 的文件中编写以下代码。这是一个简单的 angular.JS 应用程序，具有以下方面

使用“ng-include 指令”将代码注入外部文件“Table.html”。该语句已在下面的代码中以粗体突出显示。因此 div 标签 ' ‘ 将被“Table.html”文件中的整个代码替换。
在控制器中，创建了一个“tutorial”变量作为 $scope 对象的一部分。此变量包含一个键值对列表。

在我们的示例中，键值对是

名称——表示主题的名称，例如控制器、模型和指令。
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>

当您执行上述代码时，您将得到以下输出。

输出: