背景:
对于一个网站来说,即便是做一个静态页面,我们希望的一种理想的方式是:可以实现页面的组合, 只要是相同的页面元素,比如: 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 文件。 如下:
代码示意:
<footer class="footer ">
....
</footer>
在 views 目录下的 index.ejs 文件中添加代码
<body >
<div ng-view> </div>
<div ng-include="'partials/footer.html'" > </div>
</body>
这里要特别注意 ng-include
引用的语法:
最外层是一对双引号,里面是一对单引号。
小结
在同一个 html文件中无法嵌套两个 ng-view,这个ng-route的痛点。既然痛点存在,AngularJS UI Team 早已有了替代方案,它就是 ui-router
的应用。