3.1将AngularJS放入上下文

标签：des   style   java   http   color   com   

本章,作者将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方法名这样的方式表达。例如，

RESTful web service没有标准的URL定义，但是有一点，url应该能不解自明。例子中，有一个数据对象的集合叫做people，集合中有一个对象的唯一标识，是bob。

提示：在一个真实的项目中，并不总是能创建一个不言而喻的URLs，但你能做一系列的努力，保持事情简单，并没有通过URL暴露数据存储的内部结构（因为这是另一种组件间的耦合）。保持你的URLs尽可能地简单清晰，确保在服务端进行URL格式和数据存储结构之间的映射。

URL标识我要操作的数据对象，HTTP方法指定我要执行哪种操作。

你不是必须使用表中的方法，来执行操作。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时，会返回该话题。

3.1将AngularJS放入上下文,布布扣,bubuko.com

3.1将AngularJS放入上下文

标签：des   style   java   http   color   com   

原文地址：http://www.cnblogs.com/hsuyafeng/p/3783672.html