首页 > 代码库 > 3.1将AngularJS放入上下文
3.1将AngularJS放入上下文
本章,作者将AngularJS放在全球web app开发的上下文里,并为后面的章节设置功能。AngularJS的目标,是带来一款工具,它有服务端开发web client的能力,并易于开发,测试,富、复杂的web应用。
1、理解AngularJS擅长什么
AngularJS不是任何问题的解决方案。AngularJS的不同种类的功能,只适用于服务端开发人员,从浏览器中浏览。这意味着每次HTML文档被AngularJS加载后,都做了很多工作——HTML元素不得不被编译,数据绑定不得不被计算,指令需要被执行,等等。
这类工作要花费时间去执行,而时间的长短,取决于HTML文档的复杂度、关联的JavaScript代码、浏览器的质量、设备处理器的能力。你在最新的浏览器,性能好的桌面电脑上,没有感觉到任何延迟。但在动力不足的智能电话的老浏览器里,AngularJS app的初始化设置会很慢。
所以,当它执行时,设置要尽可能少,为用户提供尽可能多的app。这意味着,要关心你构建的web 应用的类型。这里有两种类型的web应用:round-trip和single page。
1.1、理解Round-Trip和Single-Page应用
很长一段时间,Web apps基于Round-Trip模型开发。浏览器从服务器请求一个初始HTML文档。用户交互——如点击一个link活提交一个表单——导致浏览器请求并接收一个完整的新的HTML文档。在该类型的应用中,浏览器必须渲染引擎HTML内容,和所有的应用逻辑和服务器上的数据。浏览器做一系列没有状态的HTTP请求,服务器通过动态生成HTML文档来响应处理。
很多当前的web开发,依然是round-trip应用,这是因为他们从浏览器中需求的少,确保广泛的客户端的支持。但这里有一系列的缺点:下个HTML文档被请求和加载期间,他们让用户等待。他们需要一个大型的服务端架构,来处理所有的请求和应用状态消息。他们需要大量宽带,因为每个HTML文档都是自包含(导致服务器的相应中,包含大量相同内容)的。
Single-page应用,使用不同的途径。一个初始化HTML文档发送到浏览器,但用户交互导致Ajax请求,用少量的HTML或数据,代替用户正在浏览的一些元素。该初始化HTML文档,永远都不被重载或替换。当Ajax请求以异步方式执行,用户可以继续和现有HTML交互,顶多看到一个"Data loading"的消息。
AngularJS擅长single-page应用,并且尤其是复杂的round-trip应用。对于简单的项目,jQuery可能是一个更好的选择。
现代web app项目的发展趋势,是朝着single-page应用模型。
1.2AngularJS和jQuery
在Web app开发上,AngularJS和jQuery有不同的途径。jQuery所有的都是关于精确操作浏览器的DOM,来创建一个应用。而AngularJS的途径,是将浏览器编程应用开发的功能。
使用jQuery,难于编写和管理大型应用,单元测试也成为挑战。
作者喜欢使用AngularJS的一个原因是,它基于jQuery的核心功能构建。事实上,AngularJS包含一个叫做jqLite的JQuery的删减版本,在写自定义指令时使用(作者会在第15-17章讲)。如果你将jQuery添加到HTML文档,AngularJS会自动检测它,并优先使用jQuery而不是jqLite。
AngularJS的主要缺点,是前期开发时间的投资,这是基于MVC开发的共同点。然而,对于复杂app或要使用重大修改或维护的,这样的初始化投资是值得做的。
索引,简而言之,jQuery适用于低复杂度的web app,不需要单元测试,你立即需要结果。jQuery对于增强round-trip web apps的HTML也不错(用户的交互会导致新的HTML文档被加载),因为你能简单地应用jQuery,而不需要修改server生成的HTML内容。AngularJS适用于更复杂的single-page web apps,当你有时间关心设计和计划,并且能使用容易地控制server 生成的HTML。
2、理解MVC模式
没啥说的,自己看吧。
3、理解RESTful服务
在AngularJS apps中,领域模型的逻辑,总是在客户端和服务端分裂的。服务端包含持久存储,典型地是一个数据库,并包含管理它的逻辑。在SQL数据库的情况下,例如,必须的逻辑会包括打开数据库服务器的连接,执行SQL查询,处理结果发送给客户端。
我们不想客户端代码直接访问数据存储,那样会在客户端和数据存储之间建立紧密的耦合。在不改变客户端代码的情况下,会导致难于单元测试,难于改变数存储。
通过使用服务来间接地访问数据存储,我们防止紧密耦合。客户端的逻辑响应得到的数据,而不知道数据存储的细节或访问背后发生的事情。
这里有很多方式,能在客户端和服务端之间传递数据。最公共地,是使用AJAX请求,调用服务端代码,服务端发送JSON。
这是RESTful web 服务的基本功能,能使用原生HTTP请求,在数据上执行create,read,update,delete操作。
注意:REST是一种API类型。至于作者,JSON服务就是RESTful。
在一个RESTful web service,操作的请求,通过URL+HTTP方法名这样的方式表达。例如,
http://myserver.mydomain.com/people/bob |
RESTful web service没有标准的URL定义,但是有一点,url应该能不解自明。例子中,有一个数据对象的集合叫做people,集合中有一个对象的唯一标识,是bob。
提示:在一个真实的项目中,并不总是能创建一个不言而喻的URLs,但你能做一系列的努力,保持事情简单,并没有通过URL暴露数据存储的内部结构(因为这是另一种组件间的耦合)。保持你的URLs尽可能地简单清晰,确保在服务端进行URL格式和数据存储结构之间的映射。
URL标识我要操作的数据对象,HTTP方法指定我要执行哪种操作。
Method | Description |
GET | 通过URL获取指定的数据对象 |
PUT | 通过URL更新指定的数据对象 |
POST | 创建一个新的数据对象 |
DELETE | 通过URL删除一个数据对象 |
你不是必须使用表中的方法,来执行操作。POST方法,经常有双重身份,数据存在就更新,数据不存在就创建。意味着PUT方法没有使用。作者将在第20章解释AngularJS对Ajax的支持。在21章用RESTful工作。
3.1等幂HTTP方法
自己看吧。
4、公共的设计陷阱
在本节,作者描述三个他在AngularJS项目中,遇到过的公共设计陷阱。这里没有代码错误,相反地。。。。
4.1将逻辑放在错误的位置
最公共的问题,是将逻辑放在错误的组件:
- 将业务逻辑放在视图,而不是控制器
- 将领域逻辑放在控制器,而不是模型
- 当使用RESTful服务时,将数据存储逻辑放在客户端模型
这种情况下,应用照常运行,但一段时间后,将变得难以增强和维护。
这里有三个准则:
- 视图逻辑应该准备要显示的数据,但永远不要修改model。
- 控制器逻辑应该永远直接从model中,create,update,delete数据。
- 客户端永远不要直接访问数据存储。
4.2采用数据存储数据格式
在一个良好设计的AngularJS应用中,从RESTful服务中获取数据,服务器的这项工作,会隐藏数据存储的实现细节,客户端使用适合的数据格式。决定客户端如何表现数据,例如,确保你使用数据存储的格式,如果数据存储不能原生地支持该格式,这是服务器执行翻译的工作。
4.3执着于旧的方式
AngularJS最强大的特性之一,是它基于jQeury,特别是他的命令特性,作者将在第15章描述。现在的问题是,想象使用AngularJS简单,但最终使用在后台使用jQeury。
可可能看起来不像设计问题,但是jQeury不能简单地分离MVC组件,它使得测试,增强,维护都变得困难。如果你在AngularJS app中,直接从jQeury操作DOM,你就会有这个问题。
你要决定使用AngularJS,你就要确保你不会退回到jQuery的方式。在第十五章,作者介绍jqLite时,会返回该话题。