首页 > 代码库 > angularJS之项目知识

angularJS之项目知识

多页应用与单页应用(SPA)
多页应用:一个项目中有多个完整的.html页面
单页应用:只有一个.html是完整的(缺少body主体),其它.html都是不完整的(可能只是一个div而已)
多页应用:多个页面间的跳转可以使用超链接、表单提交、JS…
单页应用:多个“伪页面”间的跳转可以使用超链接、JS(...)
多页应用:页面切换是同步请求:客户端先删除第一个页面的DOM结构,发起HTTP请求,等待服务器给第

二个页面的响应数据
单页应用:伪页面切换是异步请求:客户端首先请求一个完整的页面,然后再发起异步AJAX请求,获取不同

的模板页面,插入在当前  的DOM树
多页应用:每个页面都是一个完整的DOM树
单页应用:整个项目只有一个完整的DOM树
多页应用:页面切换时控制权在浏览器手中,不可能添加任何的过场动画效果
单页应用:伪页面切换的本质是一棵DOM树上的两个DIV在切换,可以很容易的添加各种过场动画
项目补充知识点:
一个项目中的多个页面中可能包含完全相同的内容,如京东商城中的很多页面都有完全相同的header和

footer部分,若每个HTML都拷贝一遍相同的内容,就违反了DRY设计原则(“不要重复你自己的代码”),

造成代码的维护困难
解决方法有如下几种:
  (1)使用Web服务器的SSI(ServerSideInclude)——修改Web服务器的配置文件
  (2)使用服务器端动态编程语言进行页面的包含,如PHP:  
include(‘header.php‘);
....
include(‘footer.php‘);
    三个PHP页面会组成一个大的响应消息,一次性返回给客户端
  (3)纯前端解决方案:用frameset或iframe——尽量少使用
  (4)纯前端解决方案:
      使用AJAX异步请求:
      产品详情页.html:

	<div id="header"></div>
	<div>主体内容</div>
	<div id="footer"></div>
 $(document).ready(function(){
    $("#header").load("header.html");   //XHR
    $("#footer").load("footer.html");  //XHR
 })

  (5)AngularJS中提供了一个类似于方案4的AJAX解决方案——ngInclude指令:
<div ng-include="  ‘header.html‘  ">(PS:ngInclude指令必须赋值为一个字符串!)
(PS:ng中ng-swipe-left="jump()"左滑ng-swipe-right="jump()"右滑)

angularJS之项目知识