基于node.js的MEAN 全栈框架： 通过 ng-include 添加网站的footer

背景：

对于一个网站来说，即便是做一个静态页面，我们希望的一种理想的方式是：可以实现页面的组合， 只要是相同的页面元素，比如： header 和 footer， 都应该“复用”。 基于node.js的MEAN 全栈框架中，我们通过 AngularJS的 ng-include 实现"复用"。

ng-include 指令

在 AngularJS中，有一个 ng-include 指令。 与此相关的是 ng-view 指令。简单说下它们的应用场景：

ng-view 通过前端路由来控制，通过ng-view，可以方便地实现页面的组合，但它也有一个明显的不足，就是一个 html 文件中，只能有一个`ng-view。

而ng-include就是将多个页面的公共页面提取出来，比如： header.html、 footer.html 等。每个页面用 ng-include 中引入进来。

ng-include 应用场景

创建一个 express 工程， 在 partials目录下，创建 footer.html 文件。 如下：

express工程的 footer.html 文件

代码示意：

....

在 views 目录下的 index.ejs 文件中添加代码

index.ejs

这里要特别注意 ng-include 引用的语法：

最外层是一对双引号，里面是一对单引号。

小结

在同一个 html文件中无法嵌套两个 ng-view，这个ng-route的痛点。既然痛点存在，AngularJS UI Team 早已有了替代方案，它就是 ui-router 的应用。

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》