在 AngularJS 中，ng-include 指令可以用来加载一个外部的 HTML 文件或者 AngularJS 模板，并将其嵌入到当前的 HTML 文档中。这个指令非常的有用，因为它可以帮助我们把一个大型的应用程序分解成多个小的模块，然后再组合在一起。
ng-include 的用法
ng-include 指令的用法非常的简单，只需要在 HTML 文件中添加一个 ng-include 属性，然后将要加载的文件的路径作为该属性的值即可。例如：
<div ng-include="'/templates/header.html'"></div>
在这个例子中，ng-include 属性的值是一个字符串，它指定了要加载的模板的路径。注意，路径需要加上单引号，否则会出现语法错误。
ng-include 的高级用法
ng-include 指令还支持一些高级的用法，例如：
动态加载模板
有时候我们需要根据不同的条件来动态加载不同的模板，这时候可以使用 ng-include 的另一个属性 ng-if。例如：
<div ng-if="isAuthenticated()" ng-include="'/templates/header-loggedin.html'"></div> <div ng-if="!isAuthenticated()" ng-include="'/templates/header-loggedout.html'"></div>
在这个例子中，ng-include 指令根据用户是否登录来动态加载不同的模板。
传递参数给模板
有时候我们需要在加载模板的时候传递一些参数给它，这时候可以使用 ng-include 的另一个属性 ng-include-params。例如：
<div ng-include="'/templates/product.html'" ng-include-params="{productId: 12345}"></div>在这个例子中，ng-include 指令会将 {productId: 12345} 这个对象传递给 product.html 模板。在模板中可以使用 $routeParams.productId 来获取这个参数。
示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-include 指令来加载一个外部的 HTML 文件。
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ---------- ----------
-------
----- -----------------------
---- --------------------------------------------
---- ---------------------------------------------
---- ---------------------------------------------
---- --------------------------------------------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ---------- ---------- ----
---
---------
-------
-------在这个例子中，我们加载了四个不同的模板文件：header.html、sidebar.html、content.html 和 footer.html。这些模板文件可以包含任何 HTML、AngularJS 指令、控制器等等。最终它们会被加载到当前的 HTML 文档中，形成一个完整的页面。
总结
在 AngularJS 中，ng-include 指令是一个非常有用的工具，它可以帮助我们将一个大型的应用程序分解成多个小的模块，然后再组合在一起。ng-include 指令的用法非常简单，只需要在 HTML 文件中添加一个 ng-include 属性，然后将要加载的文件的路径作为该属性的值即可。同时，ng-include 指令还支持一些高级的用法，例如动态加载模板、传递参数给模板等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f2aa872b3ccec22fb419d8