Spring BootのREST APIとAngularJSの組み合わせ - 行きあたりばったりエンジニアの日記

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

参考Webサイト

Getting Started · Consuming a RESTful Web Service with 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>