1. 简介

该文档的PDF版本已发布 |HERE|。

文档中的示例可通过 |HERE| 获取。

本文将通过一个客户端/服务器示例，介绍两个框架：

客户端使用 AngularJS。为简化起见，下文将简称为 Angular；
服务器端使用 Spring 4。为简便起见，下文将简称为 Spring；

理解本文需要具备以下先决条件：

具备中级 Java EE 水平；
了解 JPA（Java Persistence API），该 API 将用于访问数据库；
至少了解 Spring 的一个旧版本，以便掌握该框架的设计理念；
使用Maven配置Java项目；
掌握Web应用中HTTP通信的基础知识；
熟悉HTML语言的常用标签；
具备 JavaScript 语言的基础知识；

其他必要的知识将在案例研究过程中逐步介绍和讲解。

本文档并非课程资料，且在许多方面尚不完整。如需深入了解这两个框架，可参考以下资料：

[ref1]：由 Adam Freeman 撰写、Apress 出版社出版的《Pro AngularJS》一书。这是一本非常优秀的书籍。该书示例的源代码可在 URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/] 上免费获取；
[ref2]：Angular的官方文档 JS [https://docs.angularjs.org/guide]
[ref3]： O'Reilly 出版的《Spring Data》一书 [http://shop.oreilly.com/product/0636920024767.do]，该书介绍了如何使用框架 [Spring Data] 访问数据，无论这些数据是否来自关系型数据库 (NoSQL)；
[ref4]：Apress出版社出版的《Pro Spring 3》一书。虽然这是Spring 4的前一版本，但主要概念已在此书中呈现；
[ref5]：Spring 4 参考文档 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf]。

本文的参考来源包括上述资料，以及在大量调试过程中不可或缺的 [http://stackoverflow.com/]。

1.1. 应用程序架构

本研究应用将采用以下架构：

在 [1] 中，Web 服务器向浏览器提供静态页面。这些页面包含基于 MVC 模型（模型-视图-控制器）构建的 AngularJS 应用程序。此处的模型既代表视图，也代表业务领域，后者由 [Services] 层表示；
用户将与浏览器中显示的视图进行交互。其操作有时需要向Spring 4服务器[2]发起请求。服务器将处理该请求并返回响应 JSON（JavaScript 对象表示法）[3]。该响应将用于更新呈现给用户的视图。

1.2. 使用的工具

本文档中使用的开发工具如下：

Spring Tool Suite（用于 Spring 服务器端）：可免费下载；
Webstorm（用于 Angular 客户端）：可免费下载一个月试用版；
Wampserver（用于管理数据库 MySQL 5）：可免费下载；

第 6 节介绍了这些工具及其他工具的安装方法。

1.3. 应用程序的功能

文档中的示例可通过 |HERE| 获取。

服务器端文件位于 [rdvmedecins-metier-dao-v2] 和 [rdvmedecins-webapi-v3] 文件夹中；
客户端位于文件夹 [rdvmedecins-angular-v2] 中；
用于生成数据库 MySQL5 的脚本 SQL 位于文件夹 [database] 中；

1.3.1. 创建数据库

为了测试应用程序，我们首先使用脚本 SQL 和 [dbrdvmedecins.sql] 创建数据库。我们使用 [PhpMyAdmin] 工具（来自 WampServer）：

在 [1] 中，选择 WampServer 中的工具 [phpMyAdmin]；
在 [2] 中，选择选项 [Importer]；

在 [3] 中，选择文件 [database/dbrdvmedecins.sql]；
在 [4] 中，执行该文件；
在 [5] 中，创建数据库。

1.3.2. Web 服务器部署 / JSON

使用 Spring Tool Suite (STS)，导入 Spring 4 服务器的两个 Maven 项目：

在 [1] 和 [2] 中，我们导入 Maven 项目；
在 [3] 中，我们指定了要导入的两个项目的父文件夹；

在 [3] 中，导入的项目。这些项目可能存在错误。每个项目必须使用 >=1.7 的编译器：

因此需要一个版本 >=1.7 的 JVM：

当 JVM 不再报错时，即可运行项目 [rdvmedecins-webapi-v3]：

在 [4]、[5] 和 [6] 中，我们将项目 [rdvmedecins-webapi-v3] 作为 Spring Boot 应用程序运行；

随后，我们在 STS 的控制台中获得了以下日志：

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.0.0.RELEASE)

2014-06-05 12:22:34.049  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot                : Starting Boot on Gportpers3 with PID 9296 (D:\data\istia-1314\polys\istia\angularjs-spring4\rdvmedecins-webapi\target\classes started by ST)
2014-06-05 12:22:34.122  INFO 9296 --- [           main] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@4b4bee22: startup date [Thu Jun 05 12:22:34 CEST 2014]; root of context hierarchy
2014-06-05 12:22:35.083  INFO 9296 --- [           main] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'org.springframework.boot.autoconfigure.AutoConfigurationPackages': replacing [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null] with [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
...
 s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080/http
2014-06-05 12:22:41.630  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot : Started Boot in 8.0 seconds (JVM running for 8.944)

第 13-14 行：应用程序已在 Tomcat 服务器上启动。

1.3.3. Angular客户端的实现

我们打开包含 [rdvmedecins-angular-v2] 的文件夹 WebStorm：

在 [1] 中，选择 [Open Directory] 选项；
在 [2] 中，选择文件夹 [rdvmedecins-angular-v2]；

在 [3] 中，选择文件夹树；
在 [4] 中，选择应用程序的主页 [app.html]；
在 [5] 中，将其在最新版浏览器中打开；

在 [6] 中，是应用程序的登录页面。这是一个用于医生预约的应用程序。该应用程序已在《JSF2、Primefaces 和 Primefaces Mobile 框架入门》文档中进行过介绍；
在 [7] 中，有一个复选框，用于控制是否处于 [debug] 模式。该模式的特征是存在 [8] 框架，该框架显示当前视图的模型；
在 [9] 中，设置了一个以毫秒为单位的人为等待时间。默认值为 0（不等待）。若 N 为该等待时间的数值，则用户的任何操作都将在等待 N 毫秒后执行。这有助于观察应用程序所实现的等待管理机制；
在 [10] 中，是 Spring 4 服务器的 URL。根据前文所述，该值为 [http://localhost:8080]；
在 [11] 和 [12] 中，分别表示希望使用该应用程序的用户名和密码。共有两个用户：admin/admin（登录名/密码）拥有角色 ADMIN，以及 user/user 拥有角色 (USER)。仅角色 ADMIN 拥有使用该应用程序的权限。角色 USER 仅用于展示在此使用场景下服务器的响应；
在 [13] 中，用于连接服务器的按钮；
在 [14] 中，应用程序的语言。共有两种：默认的法语和英语。

在 [1] 中，进行连接；

登录后，可以选择想要预约的医生 [2] 以及就诊日期 [3]；
通过 [4] 查询所选医生在指定日期的日程安排；

获取医生日程表后，即可预订时段 [5]；

在 [6] 中，选择该预约的患者，并在 [7] 中确认该选择；

预约确认后，系统将自动返回日程表，新预约已记录其中。该预约日后可通过 [7] 进行删除。

主要功能已介绍完毕，操作简单。未提及的功能均为导航功能，用于返回上一视图。最后介绍语言管理：

在 [1] 中，可切换为英语；

切换为 [2]，视图将切换为英语，包括日历；