原標(biāo)題：Spring國際認(rèn)證指南|了解如何使用 AngularJS 檢索網(wǎng)頁數(shù)據(jù)
本指南將引導(dǎo)您編寫一個使用基于 Spring MVC 的RESTful Web 服務(wù)的簡單 AngularJS 客戶端。
您將構(gòu)建什么
您將構(gòu)建一個使用基于 Spring 的 RESTful Web 服務(wù)的 AngularJS 客戶端。具體來說，客戶端將使用在使用 CORS 構(gòu)建 RESTful Web 服務(wù)中心創(chuàng)建的服務(wù)。
AngularJS 客戶端將通過index.html在瀏覽器中打開文件來訪問，并將在以下位置使用接受請求的服務(wù)：
http://rest-service.guides./greeting
該服務(wù)將以JSON表示的問候進(jìn)行響應(yīng)：
{"id":1,"content":"Hello, World!"}復(fù)制AngularJS 客戶端會將 ID 和內(nèi)容呈現(xiàn)到 DOM 中。
rest-service.guides. 上的服務(wù)運(yùn)行CORS 指南中的代碼，稍作修改：對/greeting端點(diǎn)開放訪問，因?yàn)閼?yīng)用程序@CrossOrigin在沒有域的情況下使用。
你需要什么
約15分鐘
最喜歡的文本編輯器
現(xiàn)代網(wǎng)絡(luò)瀏覽器
互聯(lián)網(wǎng)連接
創(chuàng)建一個 AngularJS 控制器
首先，您將創(chuàng)建將使用 REST 服務(wù)的 AngularJS 控制器模塊：
public/hello.js
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('http://rest-service.guides./greeting').
then(function(response) {
$scope.greeting = response.data;
});
});復(fù)制這個控制器模塊被表示為一個簡單的 JavaScript 函數(shù)，它被賦予了 AngularJS$scope和$http組件。它使用該$http組件在“/greeting”處使用 REST 服務(wù)。
如果成功，它會將服務(wù)返回的 JSON 分配給$scope.greeting，從而有效地設(shè)置一個名為“greeting”的模型對象。通過設(shè)置該模型對象，AngularJS 可以將其綁定到應(yīng)用程序頁面的 DOM，呈現(xiàn)給用戶查看。
創(chuàng)建應(yīng)用程序頁面
現(xiàn)在您已經(jīng)有了一個 AngularJS 控制器，您將創(chuàng)建一個 HTML 頁面，該頁面會將控制器加載到用戶的 Web 瀏覽器中：
public/index.html
<!doctype html><html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax./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>復(fù)制請注意該部分中的以下兩個腳本標(biāo)記head。
<script src="https://ajax./ajax/libs/angularjs/1.4.3/angular.min.js"></script><script src="hello.js"></script>復(fù)制
第一個腳本標(biāo)簽從內(nèi)容交付網(wǎng)絡(luò) (CDN) 加載縮小的 AngularJS 庫 ( angular.min.js )，這樣您就不必下載 AngularJS 并將其放置在您的項(xiàng)目中。它還從應(yīng)用程序的路徑加載控制器代碼 ( hello.js )。
AngularJS 啟用了幾個自定義屬性及標(biāo)準(zhǔn) HTML 標(biāo)記一起使用。在 index.html 中，有兩個這樣的屬性在起作用：
<html>標(biāo)記具有ng-app指示的此頁面是 AngularJS 應(yīng)用程序的屬性。
<div>標(biāo)簽的ng-controller屬性設(shè)置為 reference Hello，即控制器模塊。
另請注意使用占位符的兩個<p>標(biāo)簽（由雙花括號標(biāo)識）。
<p>The ID is {{greeting.id}}</p><p>The content is {{greeting.content}}</p>復(fù)制占位符引用將在成功使用 REST 服務(wù)時設(shè)置的模型對象的id和content屬性。greeting
運(yùn)行客戶端
要運(yùn)行客戶端，您需要將它從 Web 服務(wù)器提供到瀏覽器。Spring Boot CLI（命令行界面）包括一個嵌入式 Tomcat 服務(wù)器，它提供了一種簡單的方法來提供服務(wù) Web 內(nèi)容。有關(guān)安裝和使用 CLI 的更多信息，請參閱使用 Spring Boot 構(gòu)建應(yīng)用程序。
為了從 Spring Boot 的嵌入式 Tomcat 服務(wù)器提供靜態(tài)內(nèi)容，您還需要創(chuàng)建最少量的 Web 應(yīng)用程序代碼，以便 Spring Boot 知道啟動 Tomcat。以下app.groovy腳本足以讓 Spring Boot 知道您要運(yùn)行 Tomcat：
app.groovy
@Controller class JsApp { }復(fù)制您現(xiàn)在可以使用 Spring Boot CLI 運(yùn)行該應(yīng)用程序：
春季運(yùn)行 app.groovy
應(yīng)用程序啟動后，在瀏覽器中打開http://localhost:8080 ，您會在其中看到：
每次刷新頁面時，ID 值都會增加。
概括
恭喜！您剛剛開發(fā)了一個使用基于 Spring 的 RESTful Web 服務(wù)的 AngularJS 客戶端。
