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()"右滑)
转载于:https://www.cnblogs.com/yufeiyu/p/6624470.html
- 点赞
- 收藏
- 分享
- 文章举报
- angularJS之项目知识
- 一语道破项目管理知识体系42个过程
- AngularJS入门知识之MVW类框架的编程思想探讨
- 系统集成项目管理之信息化基础知识
- PMBOK 项目管理 九大知识领域和五大流程
- 信息系统项目管理知识记忆口诀-总结
- 准备把以前做的典型项目整理下,把知识和经验整个梳理下!
- angularJs项目实战!04:angularjs的性能问题
- 简析项目中常用的七参数转换法和四参数转换法以及涉及到的基本测量学知识
- 【搜索引擎基础知识3】搜索引擎相关开源项目及网站
- 项目知识储备-自动属性 隐式类型Var
- 典型的知识库/链接数据/知识图谱项目
- PMBOK项目管理九大知识领域和五大流程 --美国IT项目管理硕士笔记(二)
- My安卓知识6--关于把项目从androidstudio工程转成eclipse工程并导成jar包
- 从项目中学习jsp知识
- 开源:Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版) 推荐
- 【知识必备】浅淡MVP在Android项目中的实战演习,让代码结构更简单~
- AngularJS初识--指令相关知识总结
- AngularJS实际项目应用——打包发布
- Android项目开发(2)-注册手机验证知识总结