このガイドでは、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 を開きます:

ID 値は、ページをリフレッシュするたびに増加します。
要約
おめでとう! Spring ベースの RESTful Web サービスを使用する AngularJS クライアントを開発しました。
関連事項
次のガイドも役立ちます。
新しいガイドを作成したり、既存のガイドに貢献したいですか? 投稿ガイドラインを参照してください: GitHub (英語) 。
すべてのガイドは、コード用の ASLv2 ライセンス、およびドキュメント用の Attribution、NoDerivatives クリエイティブコモンズライセンス (英語) でリリースされています。 |