Spring Data RESTを使ったAngularJS CRUDアプリケーション

Spring Data RESTを使用したAngularJS CRUDアプリケーション

1. 概要

このチュートリアルでは、フロントエンドにAngularJSを使用し、バックエンドにSpring DataRESTを使用する単純なCRUDアプリケーションの例を作成します。

2. RESTデータサービスの作成

永続性のサポートを作成するために、データモデルでCRUD操作を実行できるようにするSpring DataREST仕様を利用します。

RESTエンドポイントの設定方法に関する必要な情報はすべてintroduction to Spring Data RESTにあります。この記事では、導入チュートリアル用にセットアップした既存のプロジェクトを再利用します。

永続性のために、メモリデータベースのH2を使用します。

前の記事では、データモデルとして、id、name、およびemailプロパティとUserRepositoryと呼ばれるリポジトリインターフェイスを備えたWebsiteUserクラスを定義しています。

このインターフェイスを定義すると、RESTコレクションリソースとアイテムリソースを公開するためのサポートを作成するようにSpringに指示されます。後でAngularJSから呼び出すため、使用可能なエンドポイントを詳しく見てみましょう。

2.1. コレクションリソース

すべてのユーザーのリストは、エンドポイント/usersで利用できます。このURLはGETメソッドを使用して呼び出すことができ、次の形式のJSONオブジェクトを返します。

{
  "_embedded" : {
    "users" : [ {
      "name" : "Bryan",
      "age" : 20,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/1"
        },
        "User" : {
          "href" : "http://localhost:8080/users/1"
        }
      }
    },
...
    ]
  }
}

2.2. アイテムリソース

単一のWebsiteUserオブジェクトは、さまざまなHTTPメソッドと要求ペイロードを使用して/users/{userID}形式のURLにアクセスすることで操作できます。

WebsiteUserオブジェクトを取得するために、GETメソッドを使用して/users/{userID}にアクセスできます。これは、次の形式のJSONオブジェクトを返します。

{
  "name" : "Bryan",
  "email" : "[email protected]",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/users/1"
    },
    "User" : {
      "href" : "http://localhost:8080/users/1"
    }
  }
}

新しいWebsiteUserを追加するには、POSTメソッドを使用して/usersを呼び出す必要があります。新しいWebsiteUserレコードの属性は、JSONオブジェクトとしてリクエスト本文に追加されます。

{name: "Bryan", email: "[email protected]"}

エラーがない場合、このURLはステータスコード201 CREATEDを返します。

WebsiteUserレコードの属性を更新する場合は、PATCHメソッドと新しい値を含むリクエスト本文を使用してURL/users/{UserID}を呼び出す必要があります。

{name: "Bryan", email: "[email protected]"}

WebsiteUserレコードを削除するには、DELETEメソッドを使用してURL/users/{UserID}を呼び出すことができます。エラーがない場合、これはステータスコード204 NO CONTENTを返します。

2.3. MVC構成

また、アプリケーションでhtmlファイルを表示するための基本的なMVC構成を追加します。

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {

    public MvcConfig(){
        super();
    }

    @Override
    public void configureDefaultServletHandling(
      DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
}

2.4. クロスオリジンリクエストの許可

AngularJSフロントエンドアプリケーションをREST APIとは別にデプロイする場合は、クロスオリジンリクエストを有効にする必要があります。

Spring Data RESTは、バージョン1.5.0.RELEASEからこのサポートを追加しました。別のドメインからのリクエストを許可するには、リポジトリに@CrossOriginアノテーションを追加するだけです。

@CrossOrigin
@RepositoryRestResource(collectionResourceRel = "users", path = "users")
public interface UserRepository extends CrudRepository {}

その結果、RESTエンドポイントからのすべての応答で、Access-Control-Allow-Originのヘッダーが追加されます。

3. AngularJSクライアントの作成

CRUDアプリケーションのフロントエンドを作成するために、AngularJSを使用します。これはフロントエンドアプリケーションの作成を容易にするよく知られたJavaScriptフレームワークです。

AngularJSを使用するには、最初にusers.htmlと呼ばれるangular.min.jsファイルをhtmlページに含める必要があります。

次に、RESTエンドポイントを呼び出し、返されたデータを表示するAngularモジュール、コントローラー、およびサービスを作成する必要があります。

これらはapp.jsというJavaScriptファイルに配置され、users.htmlページにも含める必要があります。

3.1. 角度サービス

まず、注入されたAngularJS$httpサービスを利用してサーバーを呼び出すUserCRUDServiceというAngularサービスを作成しましょう。各呼び出しは個別のメソッドに配置されます。

/users/{userID}エンドポイントを使用してIDでユーザーを取得する方法の定義を見てみましょう。

app.service('UserCRUDService', [ '$http', function($http) {

    this.getUser = function getUser(userId) {
        return $http({
            method : 'GET',
            url : 'users/' + userId
        });
    }
} ]);

次に、/users URLにPOSTリクエストを送信し、data属性でユーザー値を送信するaddUserメソッドを定義しましょう。

this.addUser = function addUser(name, email) {
    return $http({
        method : 'POST',
        url : 'users',
        data : {
            name : name,
            email: email
        }
    });
}

updateUserメソッドは、idパラメータを持ち、PATCHリクエストを行うことを除いて、上記のメソッドと似ています。

this.updateUser = function updateUser(id, name, email) {
    return $http({
        method : 'PATCH',
        url : 'users/' + id,
        data : {
            name : name,
            email: email
        }
    });
}

WebsiteUserレコードを削除するメソッドは、DELETE要求を行います。

this.deleteUser = function deleteUser(id) {
    return $http({
        method : 'DELETE',
        url : 'users/' + id
    })
}

最後に、ユーザーのリスト全体を取得する方法を見てみましょう。

this.getAllUsers = function getAllUsers() {
    return $http({
        method : 'GET',
        url : 'users'
    });
}

これらのサービスメソッドはすべて、AngularJSコントローラーによって呼び出されます。

3.2. 角度コントローラー

UserCRUDServiceが注入され、サービスメソッドを使用してサーバーからの応答を取得し、successとerrorを処理するUserCRUDCtrlAngularJSコントローラーを作成します。）sの場合、HTMLページに表示するための応答データを含む$scope変数を設定します。

getUser(userId)サービス関数を呼び出し、成功とエラーの場合に2つのコールバックメソッドを定義するgetUser()関数を見てみましょう。サーバー要求が成功すると、応答はuser変数に保存されます。それ以外の場合、エラーメッセージは処理されます。

app.controller('UserCRUDCtrl', ['$scope','UserCRUDService',
  function ($scope,UserCRUDService) {
      $scope.getUser = function () {
          var id = $scope.user.id;
          UserCRUDService.getUser($scope.user.id)
            .then(function success(response) {
                $scope.user = response.data;
                $scope.user.id = id;
                $scope.message='';
                $scope.errorMessage = '';
            },
            function error (response) {
                $scope.message = '';
                if (response.status === 404){
                    $scope.errorMessage = 'User not found!';
                }
                else {
                    $scope.errorMessage = "Error getting user!";
                }
            });
      };
}]);

addUser()関数は、対応するサービス関数を呼び出し、応答を処理します。

$scope.addUser = function () {
    if ($scope.user != null && $scope.user.name) {
        UserCRUDService.addUser($scope.user.name, $scope.user.email)
          .then (function success(response){
              $scope.message = 'User added!';
              $scope.errorMessage = '';
          },
          function error(response){
              $scope.errorMessage = 'Error adding user!';
              $scope.message = '';
        });
    }
    else {
        $scope.errorMessage = 'Please enter a name!';
        $scope.message = '';
    }
}

updateUser()およびdeleteUser()関数は、上記の関数と同様です。

$scope.updateUser = function () {
    UserCRUDService.updateUser($scope.user.id,
      $scope.user.name, $scope.user.email)
      .then(function success(response) {
          $scope.message = 'User data updated!';
          $scope.errorMessage = '';
      },
      function error(response) {
          $scope.errorMessage = 'Error updating user!';
          $scope.message = '';
      });
}

$scope.deleteUser = function () {
    UserCRUDService.deleteUser($scope.user.id)
      .then (function success(response) {
          $scope.message = 'User deleted!';
          $scope.User = null;
          $scope.errorMessage='';
      },
      function error(response) {
          $scope.errorMessage = 'Error deleting user!';
          $scope.message='';
      });
}

最後に、ユーザーのリストを取得してusers変数に格納する関数を定義しましょう。

$scope.getAllUsers = function () {
    UserCRUDService.getAllUsers()
      .then(function success(response) {
          $scope.users = response.data._embedded.users;
          $scope.message='';
          $scope.errorMessage = '';
      },
      function error (response) {
          $scope.message='';
          $scope.errorMessage = 'Error getting users!';
      });
}

3.3. HTMLページ

users.htmlページは、前のセクションで定義されたコントローラー関数と格納された変数を利用します。

まず、Angularモジュールを使用するには、ng-appプロパティを設定する必要があります。

次に、コントローラーの関数を使用するたびにUserCRUDCtrl.getUser()を入力しないようにするために、ng-controllerプロパティセットを使用してHTML要素をdivでラップできます。

操作する_ form that will input and display the values for the _WebiteUserオブジェクトを作成しましょう。これらのそれぞれには、ng-model属性セットがあり、属性の値にバインドされます。

たとえば、id入力をuser.id変数にバインドすると、入力の値が変更されるたびに、この値がuser.id変数に設定されます。その逆も同様です。

次に、ng-click属性を使用して、定義された各CRUDコントローラー関数の呼び出しをトリガーするリンクを定義しましょう。

Get User
Update User
Add User
Delete User

最後に、ユーザーのリスト全体を名前で表示しましょう。

Get all Users



{{usr.name}} {{usr.email}}

4. 結論

このチュートリアルでは、AngularJSとSpring Data RESTの仕様を使用してCRUDアプリケーションを作成する方法を示しました。

上記の例の完全なコードは、GitHub projectにあります。

アプリケーションを実行するには、コマンドmvn spring-boot:runを使用して、URL/users.htmlにアクセスします。

TOC