项目中,习惯把多个页面中完全一样的内容,单独提取出来作为一个独立的文件(如header.html、footer.html),凡是需要此文件的页面,引入该页面即可。页面包含可以采用多种方案:
1、利用Web服务器的SSI命令:客户端请求一个页面,服务器一次返回多个页面 — 需要修改Web服务器配置文件。
2、使用服务器端动态语言提供的页面包含函数:如PHP
include(‘header.php’);
...echo’主体’;
include(‘footer.php’);
客户端请求一个页面,服务器返回多个PHP页面组合后的一个页面、
3、在客户端使用AJAX技术:先加载一个页面的主体内容,加载完成后。再去请求header.html、footer.html放到空容器中
<div id=”header”></div>
<main>xxxxxxxx</main>
<div id=”footer”></div>
$.ready(function(){
$(‘#header’).load(‘header.html’);
$(‘#footer’).load(‘footer.html’);
})
提示:AngularJS中ng模块提供了一个指令:ngInclude,已经实现了方法3
<div ng-include=” ’tpl/header.html’ “></div>