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