Spring Boot 与 Docker
观察 GraphQL 的实际运行

本指南将引导您创建一个简单的 AngularJS 客户端,用于消费基于 Spring MVC 的 RESTful Web 服务

你要建造什么

你将构建一个 AngularJS 客户端来消费基于 Spring 的 RESTful 网络服务。具体来说,该客户端将消费在 使用 CORS 构建 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 指南的代码,并做了一些小修改:由于应用使用了不指定域的@CrossOrigin注解,因此对 /greeting 端点有开放访问权限。

所需内容

  • 大约 15 分钟

  • 常用的文字编辑器

  • 一个现代网页浏览器

  • 互联网连接

创建AngularJS控制器

首先,你将创建一个 AngularJS 控制器模块来消费 REST 服务。

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 组件来调用位于 "/greeting" 的 REST 服务。

如果成功,它将把服务返回的 JSON 赋值给 $scope.greeting,从而创建一个名为 "greeting" 的模型对象。通过设置该模型对象,AngularJS 可以将其绑定到应用程序页面的 DOM 上,并使其对用户可见。

创建应用程序页面

你现在已经有了一个 AngularJS 控制器,接下来需要创建一个 HTML 页面来加载这个控制器到用户的 web 浏览器中。

public/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>

第一个 script 标签从内容分发网络(CDN)加载最小化的 AngularJS 库(angular.min.js),这样你就不必将其下载并放置在项目中。此外,它还从应用路径加载控制器代码(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 模型对象的 idcontent 属性,这些属性将在成功调用 REST 服务后被设置。

运行客户端

要运行客户端,你需要通过一个 Web 服务器将其提供给浏览器。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,你将会看到:

Model data retrieved from the REST service is rendered into the DOM.

每次你刷新页面时,ID值会自动增加。

摘要

恭喜!你刚刚开发了一个使用基于 Spring 的 RESTful 网络服务的 AngularJS 客户端。

本页目录