読者です 読者をやめる 読者になる 読者になる

Java EE 事始め!

主にJava EEについて、つらつらとマイペースに書いていきます。「Java EEを勉強するときに、一番最初に読んでもらえるブログ」を目指して頑張ります!

Spring BootのREST APIとAngularJSの組み合わせ

Spring Boot AngularJS

最近、AngularJSも少し勉強しているのですが、「Spring Boot AngularJS」で検索したらサンプルが出てきたので、やってみました。

やりたいこと

「はじめてのSpring Boot」の「3.2 「REST Webサービスの開発」」のサンプルに、WebサービスからのJSONをAngularJSで受け取って表示する画面を作成します。

作り方

src/main/resources直下に「public」というフォルダを作り、そこに下記のようなJS・HTMLを作成します。

hello.js

function Hello($scope, $http) {
    $http.get('http://localhost:8080/api/customers').
        success(function(data) {
            $scope.customers = data;
        });
}

home.html

<!doctype html>
<html ng-app>
<head>
    <title>Hello AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="hello.js"></script>
</head>
<body>
    <div ng-controller="Hello">
        <ul ng-repeat="customer in customers">
            <li>{{customer.id}} {{customer.firstName}} {{customer.lastName}}</li>
        </ul>
    </div>
</body>
</html>

こんな感じです。
f:id:MasatoshiTada:20141220163706p:plain

実行結果

作成できたら、メインメソッドを実行して起動し、ブラウザから下記のURLにアクセスします。
http://localhost:8080/home.html
こんな感じになったら成功です。
f:id:MasatoshiTada:20141220164049j:plain

注意点

このサンプル、AngularJSの1.2系では動きますが、1.3系では動きません。
1.3系では何も表示されず、画面が真っ白になります。
この点は、引き続き調査します。

★追記
AngularJS 1.3系でのサンプルはコレあたりかな?
https://docs.angularjs.org/tutorial/step_11