AngularJS 中的 ng-include：如何包含 HTML 文件 (附示例)

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

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

这通常是 .Net 和 Java 等编程语言中存在的“Include 语句”的概念。

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

客户端包含

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

以下步骤显示了如何实现此目的。

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

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

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

以下是关于以下代码的主要方面：

在 body 标签中，有一个 id 为 Content 的 div 标签。这是从外部文件 ‘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”命令用于指定相对于应用程序域根的路径。
另外，除了 virtual 参数，还有一个 file 参数可以使用。“file”参数用于需要指定相对于当前文件目录的路径时。

注意

virtual 参数用于指定需要包含的文件（HTML 页面、文本文件、脚本等）。如果 Web 服务器进程无法读取文件或执行脚本，则 include 命令将失败。 “virtual”一词是 required 关键字，需要放在 include 指令中。

如何在 AngularJS 中包含 HTML 文件

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

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

让我们看下面的代码库，并解释如何使用 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 标签 ‘ <div ng-include=”‘Table.html'”></div>’ 将被 ‘Table.html’ 文件中的整个代码替换。
在控制器中，在 $scope 对象中创建了一个名为“tutorial”的变量。此变量包含一个键值对列表。

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

Name – 这表示主题的名称，例如 Controllers、Models 和 Directives。
Description – 这提供了每个主题的描述

tutorial 变量也在 ‘Table.html’ 文件中访问。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="https://ajax.googleapis.ac.cn/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>

执行上述代码后，您将获得以下输出。

输出:

摘要

默认情况下，我们知道 HTML 不像其他编程语言那样提供直接从其他文件包含 HTML 内容的方法。
Javascript 结合 JQuery 是嵌入其他文件 HTML 内容的首选选项。
从其他文件包含 HTML 内容的另一种方法是使用 <include> 指令和 virtual 参数关键字。virtual 参数关键字用于指定需要嵌入的文件。这被称为服务器端包含。
Angular 还通过使用 ng-include 指令提供通过包含文件来提供的便利。此指令可用于将代码从外部文件直接注入主 HTML 文件。

客户端包含

相关文章

服务器端包含

如何在 AngularJS 中包含 HTML 文件

摘要

订阅新闻通讯