SpringBoot 2 RESTful Web 服务与 AngularJS

开篇词

该指南将引导你编写一个简单的 AngularJS 客户端，该客户端使用基于 Spring MVC 的 RESTful Web 服务。

你将创建的应用

我们将构建一个使用基于 Spring 的 RESTful Web 服务的 AngularJS 客户端。具体来说，客户端将消费使用 CQRS 构建 RESTful Web 服务（尽请期待～）中所创建的服务。

可以通过在浏览器中打开 index.html 文件来访问 AngularJS 客户端，并将在以下位置使用接受请求的服务：

http://rest-service.guides.spring.io/greeting

该服务将以 JSON 表示形式的问候进行响应：

{"id":1,"content":"Hello, World!"}

AngularJS 客户端会将 ID 和内容呈现到 DOM 中。

rest-service.guides.spring.io 上的服务正在运行 CORS 指南（尽请期待～）中的代码，并作了一些小的改动：因为 /app 使用的是 @CrossOrigin，没有域名，因此可以对 /greeting 端点进行开放访问。

创建 AngularJS 控制器

首先，我们将创建会使用 REST 服务的 AngularJS 控制器模块：
public/hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});

该控制器模块表示为一个简单的 JavaScript 函数，它提供了 AngularJS 的 $scope 和 $http 组件。它使用 $http 组件来消费由 REST 服务提供的 /greeting。

如果成功，它将从服务器返回的 JSON 分配给 $scope.greeting，从而有效地设置一个名为 “greeting” 的模型对象。通过设置该模型对象，AngularJS 可以将其绑定到应用页面的 DOM，以呈现给用户进行查看。

创建应用页

现在我们有 AngularJS 控制器，我们将创建 HTML 页面，该页面会将控制器加载到用户的浏览器中：
publix/index.html

<!doctype html>
<html ng-app="demo">
	<head>
		<title>Hello AngularJS</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    	<script src="hello.js"></script>
	</head>

	<body>
		<div ng-controller="Hello">
			<p>The ID is {{greeting.id}}</p>
			<p>The content is {{greeting.content}}</p>
		</div>
	</body>
</html>

请注意 head 部分中的以下两个脚本部分。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

第一个脚本标签从内容分发网络（CDN）加载生产版的 AngularJS 库（angular.min.js），因此我们无需下载 AngularJS 并将其放置在项目中。它还会从应用的路径加载控制器代码（hello.js）。

AngularJS 库启用了几个用于标准 HTML 标签的自定义属性。在 index.html 中，两个这样的属性在起作用：

<html> 标签具有 ng-app 属性，以指示该页面是 AngularJS 应用；
<div> 标记的 ng-controller 属性设置为应用控制器模块 Hello。

还要注意两个使用占位符的 <p> 标签（由双花括号标识）。

<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>

占位符引用 greeting 模型对象的 id 和 content 属性，这些属性将在成功消费 REST 服务时设置。

运行客户端

要运行客户端，我们需要通过服务器将其提供给浏览器。Spring Boot CLI（命令行界面）包括嵌入式 Tomcat 服务器，提供了一种简单的方法来提供 Web 内容。有关安装和使用 CLI 的更多信息，请参见使用 Spring Boot 构建应用。

为了从 Spring Boot 的嵌入式 Tomcat 服务器提供静态内容，我们还需要创建最少的 Web 应用代码，以便 Spring Boot 直到如何启动 Tomcat。下面的 app.groovy 脚本足以让 Spring Boot 知道你要运行 Tomcat：
app.groovy

@Controller class JsApp { }

我们现在可以使用 Spring Boot CLI 运行该应用：

spring run app.groovy

应用启动后，在浏览器中访问 http://localhost:8080，我们会在其中看到：

每次刷新页面时，ID 直都会增加。

概述

恭喜你！我们刚刚开发了一个消费基于 Spring 的 RESTful Web 服务的 AngularJS 客户端。

参见

以下指南也可能会有所帮助：

想看指南的其他内容？请访问该指南的所属专栏：《Spring 官方指南》

Snow Hide

发布了159 篇原创文章 · 获赞 10 · 访问量 1万+

私信关注