angularJS之项目知识
来源:互联网 发布:管理淘宝店铺的手机软件 编辑:程序博客网 时间:2024/05/13 12:03
(PS:angular项目中所要用到的所有js文件下载地址:http://download.csdn.net/download/zhaohaixin0418/9672039)
WEB项目中“单页应用”和“多页应用“的区别:
多页应用与单页应用(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之项目知识
- AngularJs 知识
- AngularJS入门之简单的项目搭建
- Unity之项目知识基础
- Unity之项目知识基础
- angularjs项目
- angularJS项目
- AngularJS 知识总结
- AngularJS入门知识
- AngularJS 开发知识架构
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
- AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID
- 【转】项目管理之IPD知识
- 项目管理之公式与知识
- 系统集成项目管理之项目管理一般知识
- angularJs项目实战
- AngularJS项目环境搭建
- Android 自定义View (一)
- bzoj 1047 理想的正方形
- java基础面试题1-----String,StringBuffer,StringBuilder的区别
- Xcode 8制作动态及静态Framework
- 微信公众号网页上点击放大图片浏览,解决方案
- angularJS之项目知识
- maven 打包时,总是少了一个包,后来发现是pom 文件的scope 的类型导致
- react native 中DataPickerAndroid的用法和一些注意注意点
- 对UIViewController的presentedViewController,presentingViewController这两个属性的了解
- 小灵感2
- a 标签中调用js的几种方法
- 道教,儒家,佛教之比较
- 探究数据结构之链表Java代码实现(一)
- 仿QQ空间的一款APP(二)