SpringBoot 2 RESTfulなWebサービスとAngularJS

オープニングの言葉

ガイドは、クライアントが春のMVCベースの使用、シンプルなAngularJSクライアントを作成するためにあなたを導くでしょうRESTfulなWebサービスを。

あなたのアプリケーションが作成されます。

私たちは、AngularJS SpringベースのRESTfulなWebサービスを使用してクライアントを構築します。具体的には、クライアントが消費されますRESTfulなWebサービスを構築する使用CQRSを作成したサービス（〜楽しみをしてください）。

ブラウザで開くことができるindex.htmlアクセスクライアントファイルのAngularJSに、そして次の場所で要求を受け入れるサービスを使用します。

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

応答する挨拶のサービス意志のJSON表現：

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

AngularJSクライアントIDとコンテンツは、DOMにレンダリングされます。

rest-service.guides.spring.io上で実行中のサービスCORSガイドコード（前進〜表情をしてください）をし、いくつかのマイナーな変更を行っ：/アプリを使用していないので@CrossOrigin何のドメイン名を、それ可能になる/greetingエンドポイントが開きますアクセス。

AngularJSコントローラを作成します

まず、AngularJSコントローラモジュールRESTサービスを使用しますが作成されます。
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消費者にコンポーネントを/ RESTサービスによって提供挨拶します。

成功した場合、それはに割り当てられたサーバーからJSONを返します$scope.greeting効果的で「挨拶」という名前のモデルオブジェクトを設定し、。モデルオブジェクトを提供することにより、AngularJSは、視聴のためにユーザに提示されるDOMアプリケーションページにバインドすることができます。

アプリケーションページを作成します。

今、私たちはAngularJSコントローラを持って、我々は、コントローラ、ユーザーのブラウザにロードされるHTMLページを作成します。
publix/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には、二つのそのような仕事の性質：

<html>持つタグng-appページがAngularJSアプリケーションであることを示すためにプロパティを。
<div>タグng-controllerアプリケーションコントローラモジュールへのプロパティHello。

また、2個のプレースホルダの使用注意<p>（二波括弧によって識別）タグ。

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

プレースホルダの参照greetingモデルオブジェクトidとcontent成功した消費者のRESTサービスの時に設定される属性。

クライアントを実行します

クライアントを実行するには、我々はサーバーブラウザにそれを提供する必要があります。春ブーツCLI（コマンドラインインターフェイス）は、Webコンテンツを提供する簡単な方法を提供し、組み込みTomcatサーバーを含んでいます。CLIのインストールと使用の詳細については、ビルドアプリケーションに使用春ブーツを。

春ブーツ組み込みTomcatサーバーからの静的なコンテンツを提供するために、我々はまた、Tomcatを起動する方法春ブーツまで、最小限のWebアプリケーションのコードを作成する必要があります。次app.groovyのスクリプトは、春ブーツTomcatを実行したい知っているように十分です：
app.groovy