This guide walks you through writing a simple AngularJS client that consumes a Spring MVC-based RESTful web service.
What you’ll build
You will build an AngularJS client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.
The AngularJS client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:
http://rest-service.guides.spring.io/greeting
The service will respond with a JSON representation of a greeting:
{“id”:1,“content”:“Hello, World!”}
The AngularJS client will render the ID and content into the DOM.
The service at rest-service.guides.spring.io is running the code from the CORS guide with small modifications: there is open access to the /greeting endpoint because the app is using @CrossOrigin with no domain.
What you’ll need
About 15 minutes
A favorite text editor
A modern web browser
An internet connection
Create an AngularJS Controller
First, you will create the AngularJS controller module that will consume the REST service:
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;
});
});
This controller module is represented as a simple JavaScript function that is given AngularJS’s $scope and $http components. It uses the $http component to consume the REST service at “/greeting”.
If successful, it will assign the JSON returned back from the service to $scope.greeting, effectively setting a model object named “greeting”. By setting that model object, AngularJS can bind it to the application page’s DOM, rendering it for the user to see.
Create the Application Page
Now that you have an AngularJS controller, you will create the HTML page that will load the controller into the user’s web browser:
public/index.html
<!doctype html>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
Note the following two script tags within the head section.
The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that you don’t have to download AngularJS and place it in your project. It also loads the controller code (hello.js) from the application’s path.
The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play:
The <html> tag has the ng-app attribute to indicate that this page is an AngularJS application.
The <div> tag has the ng-controller attribute set to reference Hello, the controller module.
Also note the two
tags which use placeholders (identified by double-curly-braces).
The ID is {{greeting.id}}
The content is {{greeting.content}}
The placeholders reference the id and content properties of the greeting model object which will be set upon successfully consuming the REST service.
Run the client
To run the client, you’ll need to serve it from a web server to your browser. The Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. See Building an Application with Spring Boot for more information about installing and using the CLI.
In order to serve static content from Spring Boot’s embedded Tomcat server, you’ll also need to create a minimal amount of web application code so that Spring Boot knows to start Tomcat. The following app.groovy script is sufficient for letting Spring Boot know that you want to run Tomcat:
app.groovy
@Controller class JsApp { }
You can now run the app using the Spring Boot CLI:
spring run app.groovy
Once the app starts, open http://localhost:8080 in your browser, where you see:
Model data retrieved from the REST service is rendered into the DOM.
The ID value will increment each time you refresh the page.
Summary
Congratulations! You’ve just developed an AngularJS client that consumes a Spring-based RESTful web service.
translate：
翻译：
第一个脚本标记从内容交付网络（CDN）加载缩小的angular js库（angular.min.js），这样您就不必下载AngularJS并将其放在项目中。它还从应用程序的路径加载控制器代码（hello.js）。
AngularJS库支持多个自定义属性，用于标准HTML标记。在index.html中，有两个这样的属性：
标记具有ng app属性，表示此页面是AngularJS应用程序。标记。
ID是{{greeting.ID}
内容是{{greeting.content}
占位符引用问候语模型对象的id和内容属性，这些属性将在成功使用REST服务时设置。运行客户端
要运行客户机，您需要将其从web服务器提供给您的浏览器。Spring Boot CLI（命令行界面）包括一个嵌入式Tomcat服务器，它提供了一种简单的服务web内容的方法。有关安装和使用CLI的更多信息，请参阅使用Spring Boot构建应用程序。
为了从Spring Boot的嵌入式Tomcat服务器提供静态内容，您还需要创建最少的web应用程序代码，以便springboot知道如何启动Tomcat。以下app.groovy脚本足以让Spring Boot知道您想要运行Tomcat：
app.groovy应用程序
@控制器类JsApp{}
现在可以使用Spring Boot CLI运行应用程序：
spring run应用程序.groovy
应用程序启动后，在浏览器中打开http://localhost:8080，您将看到：
从REST服务检索的模型数据被呈现到DOM中。
每次刷新页面时，ID值都将增加。
摘要
祝贺 你！您刚刚开发了一个使用基于Spring的RESTful web服务的AngularJS客户机。
