angularJS之项目知识

Posted 2020-09-06 小小鱼爱吃鱼

多页应用与单页应用（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()"右滑）