关于多个页面同样内容的引入

最近在做一个项目，取名为Music-J，哈哈，够霸气吧！不错，Music大家都懂，我爱音乐。J就是我名字的简称啦！

在完成项目的过程中，我也遇到了之前一直有的问题，就是很多页面中都会有一部分的样式内容一模一样，最初的做法就是直接将相同的代码在每个页面复制粘贴，但后来的话就是把多个页面中完全一样的内容，单独提取出来作为一个独立的文件(如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后，发现它的指令库特别强大！！！于是查了一下AngularJS的操作文档，果然发现了一个指令ngInclude：

<div ng-include=" 'tpl/header.html'"></div>

非常好用，大家也可以试试，可以完全代替方法3！