使用AngularJS消费RESTful Web服务

你会建立什么

您将构建一个使用基于Spring的RESTful Web服务的AngularJS客户端。具体来说，客户端将使用在使用CORS构建RESTful Web服务中创建的服务。

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

http://rest-service.guides.springref.com/greeting

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

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

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

rest-service.guides.springref.com处的服务通过很小的修改即可运行CORS指南中的代码：可以对/greeting端点进行开放访问，因为该应用程序使用@CrossOrigin时没有域。

你需要什么

约15分钟
最喜欢的文字编辑器
现代的网络浏览器
互联网连接

创建一个AngularJS控制器

首先，您将创建将使用REST服务的AngularJS控制器模块：

public/hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.springref.com/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>

第一个脚本标签从内容分发网络（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>

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

运行客户端

要运行客户端，您需要将其从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运行app.groovy

应用启动后，在浏览器中打开http：// localhost：8080，您会在其中看到：

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

概括

恭喜你！您刚刚开发了使用基于Spring的RESTful Web服务的AngularJS客户端。

也可以看看

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

是否要编写新指南或为现有指南做出贡献？查看我们的贡献准则。

所有指南均以代码的ASLv2许可证和写作的Attribution，NoDerivatives创用CC许可证发布。