ng-include 是 AngularJS 提供的一个指令，可以用来在页面中加载 html 文件或模板，它可以使我们的代码更加模块化、易于维护。
在前端开发中，我们经常会用到像 Bootstrap、AngularJS 这样的库或框架，而这些库或框架中可能会用到其他的一些组件或插件，通常情况下这些组件或插件都是由第三方开发者完成并通过 npm 发布，因此使用 npm 包 ng-include 可以使我们更加方便的获取到这些组件或插件。
安装
要使用 ng-include，我们首先需要安装 AngularJS，可以通过 npm 进行安装：
npm install angular --save
然后安装 ng-include：
npm install ng-include --save
使用
使用 ng-include 也很简单。我们可以把需要加载的 html 文件写在一个单独的文件中，比如 header.html：
<header> <h1>这是页头</h1> </header>
然后在我们的主页面中使用 ng-include：
-- -------------------- ---- ------- ----- --------------- ---- ----------------------- ---- --------------------------------- ----------- ------ ------- -------------------------------------- ------- -------------------------------------------- -------- --- --- - ----------------------- --------------- ------------------------ ---------------- - -- --------- --- --------- -------展开代码
可以看到，我们在 div 标签中使用了 ng-include 指令，并传入了 header.html 文件的路径。在页面渲染时，ng-include 会将指定的文件载入进来，并且可以传递参数。
参数传递
如果我们需要在载入的 html 文件中使用一些变量，我们可以使用 ng-include 的 ng-init 属性来传递参数。比如我们需要在 header.html 文件中显示用户名：
<header> <h1>欢迎 {{username}}</h1> </header>
我们可以在主页面中使用 ng-init 传入用户名信息：
<div ng-controller="myCtrl"> <div ng-include="'header.html'" ng-init="username='张三'"></div> <p>这是正文</p> </div>
这样子，在渲染 header.html 文件时，就会把 username 参数传进去，实现更加灵活的页面展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571781e8991b448d4030
