Spring Boot AngularJS で REST API の利用 - 公式サンプルコード

このガイドでは、Spring MVC ベースの RESTful Web サービス (英語) を使用する簡単な AngularJS クライアントを作成する方法を説明します。

構築する

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 ガイドからコードを実行しています。アプリが @CrossOrigin をドメインなしで使用しているため、/greeting エンドポイントへのオープンアクセスがあります。

必要なもの

約 15 分
お気に入りのテキストエディター
最新の Web ブラウザー
インターネット接続

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 の $scope および $http コンポーネントが与えられた単純な JavaScript 関数として表されます。$http コンポーネントを使用して、「/greeting"」で REST サービスを利用します。

成功すると、サービスから返された JSON を $scope.greeting に割り当て、「greeting」という名前のモデルオブジェクトを効果的に設定します。そのモデルオブジェクトを設定することにより、AngularJS はそれをアプリケーションページの DOM にバインドし、ユーザーに見えるようにレンダリングできます。

アプリケーションページの作成

AngularJS コントローラーができたため、コントローラーをユーザーの Web ブラウザーに読み込む HTML ページを作成します。

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 セクション内の次の 2 つのスクリプトタグに注意してください。

<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 では、このような属性が 2 つあります:

<html> タグには、このページが AngularJS アプリケーションであることを示す ng-app 属性があります。
<div> タグには、コントローラーモジュールである Hello を参照するように設定された ng-controller 属性があります。

また、プレースホルダーを使用する 2 つの <p> タグにも注意してください（二重中括弧で識別されます）。

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

プレースホルダーは、REST サービスを正常に使用したときに設定される greeting モデルオブジェクトの id および content プロパティを参照します。

クライアントを実行する

クライアントを実行するには、Web サーバーからブラウザーにクライアントを提供する必要があります。Spring Boot CLI（コマンドラインインターフェース）には、Web コンテンツを提供するためのシンプルなアプローチを提供する Tomcat サーバーが組み込まれています。CLI のインストールと使用の詳細については、Spring Boot アプリケーションの作成を参照してください。

Spring Boot の組み込み Tomcat サーバーから静的コンテンツを提供するには、Spring Boot が Tomcat を起動することを認識できるように、最小限の Web アプリケーションコードを作成する必要もあります。Tomcat を実行することを Spring Boot に知らせるには、次の app.groovy スクリプトで十分です。

app.groovy

@Controller class JsApp { }

これで、Spring Boot CLI を使用してアプリを実行できます。

spring run app.groovy

アプリが起動したら、ブラウザーで http://localhost:8080 を開きます:

Model data retrieved from the REST service is rendered into the DOM.

ID 値は、ページをリフレッシュするたびに増加します。

要約

おめでとう！ Spring ベースの RESTful Web サービスを使用する AngularJS クライアントを開発しました。

AngularJS で REST API の利用

構築する

必要なもの

AngularJS コントローラーを作成する

アプリケーションページの作成

クライアントを実行する

要約

関連事項