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

你会建立什么

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

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

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

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

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

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

rest-service.guides.spring.io上的服务通过少量修改运行了CORS指南中的代码：可以对/greeting端点，因为该应用程序正在使用@CrossOrigin没有域。

你需要什么

  • 约15分钟

  • 最喜欢的文字编辑器

  • 现代的网络浏览器

  • 互联网连接

创建一个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;
        });
});

该控制器模块表示为AngularJS的简单JavaScript函数$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中，两个这样的属性在起作用：

  • 的标签具有ng-app属性，指示此页面是AngularJS应用程序。

  • 的

    标签具有ng-controller属性设置为参考Hello ，控制器模块。

还要注意两个

使用占位符的标签（由双大括号标识）。

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

占位符引用id和content的属性greeting成功使用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 ，您会在其中看到：

从REST服务检索的模型数据将呈现到DOM中。

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

摘要

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

也可以看看

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

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

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