1. 简介

文档的PDF版本可在此处获取 |HERE|。

文档中的示例可在此处查看 |HERE|。

在此，我们将通过一个客户端/服务器示例介绍两个框架：

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

阅读本文需要具备以下先决条件：

具备中级 Java EE 知识；
了解 JPA（Java Persistence API），该技术将用于访问数据库；
了解至少一个旧版本的 Spring，以便理解该框架的设计理念；
具备使用 Maven 配置 Java 项目的经验；
对 Web 应用程序中 HTTP 通信的基本理解；
常见的 HTML 标签；
具备 JavaScript 的基础知识；

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

本文档并非课程，且在许多方面尚不完整。若想进一步了解这两个框架，可参考以下资料：

[ref1]：Adam Freeman 所著、Apress 出版的《Pro AngularJS》。这是一本非常优秀的书籍。书中示例的源代码可在 [http://www.apress.com/downloadable/download/sample/sample_id/1527/] 免费获取；
[ref2]：AngularJS 官方文档 [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应用程序。此处的模型同时涵盖视图和业务领域，由[服务]层表示；
用户将与浏览器中呈现的视图进行交互。用户的操作有时需要向 Spring 4 服务器 [2] 发起查询。服务器将处理请求并返回 JSON（JavaScript 对象表示法）响应 [3]。该响应将用于更新呈现给用户的视图。

1.2. 使用的工具

本文档中使用了以下开发工具：

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

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

1.3. 应用程序功能

示例代码可作为可下载的 ZIP 文件在 |此处| 获取。

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

1.3.1. 创建数据库

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

在 [1] 中，从 WampServer 中选择 [phpMyAdmin] 工具；
在 [2] 中，选择 [导入] 选项；

在 [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 的编译器：

因此，需要 JVM 版本 >=1.7：

一旦不再出现 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 客户端

我们使用 WebStorm 打开 [rdvmedecins-angular-v2] 文件夹：

在 [1] 中，选择 [打开目录] 选项；
在 [2] 中，选择 [rdvmedecins-angular-v2] 文件夹；

在 [3] 中，选择文件夹树；
在 [4] 中，选择应用程序的主页 [app.html]；
在 [5] 中，使用现代浏览器打开它；

在 [6] 中，是应用程序的登录页面。这是一个面向医生的预约排程应用程序。该应用程序已在《JSF2、PrimeFaces 和 PrimeFaces Mobile 框架入门》文档中进行过介绍；
在 [7] 处，有一个复选框，可用于启用或禁用 [调试] 模式。该模式通过 [8] 框架的显示来标识，该框架展示当前视图的模型；
在 [9] 中，是一个以毫秒为单位的人为等待时间。其默认值为 0（不等待）。若 N 是该等待时间的数值，则任何用户操作都将在等待 N 毫秒后执行。这使您能够观察应用程序实现的等待管理机制；
在 [10] 中，是 Spring 4 服务器的 URL。根据前文所述，此处应为 [http://localhost:8080]；
在 [11] 和 [12] 中，填写希望使用该应用程序的用户名和密码。共有两个用户：admin/admin（用户名/密码）具有 ADMIN 角色，user/user 具有 USER 角色。仅 ADMIN 角色拥有使用该应用程序的权限。USER 角色仅用于在此用例中演示服务器的响应；
在 [13] 中，是用于连接服务器的按钮；
在 [14] 中，应用程序的语言选项。共有两种语言：法语（默认）和英语。