Angular + Spring Boot

こんばんは。今日は、Angular + Spring Boot を動かしてみます。

Spring Boot(バックエンド)

Spring Bootは、前回まで使用していたEmployeeを使用します。そのままでは使えないのでModelとRepositoryは同じですが、Serviceを追加し、Contorollerを変更しています。

プロジェクトはこんな感じです。

 

 

 

 

 

 

 

 

Controllerクラス

Serviceクラス

 

動作確認してみます。

Appを右クリックから「実行」→「Spring Bootアプリケーション」を選択します。ブラウザで「http://localhost:8080/api/employees」にアクセスするとJSONデータが返ってくることが確認できます。

 

Angular(フロントエンド)

AngularJSは、Node.jsをインストールする必要があります。下記サイトを参考にしてnvm-windowsインストールしました。

参考サイト:

 

nvm-windowsをインストール後、nvmをインストールします。

 

適当な場所でプロジェクトを作成します。

プロジェクトを実行します。

起動すると「http://localhost:4200/」でおなじみのページが開きます。

 

angularの起動が確認できたらいったん停止し、バックエンドを呼び出すように処理を作ります。

コマンドラインからComponent、Class、Serviceを新規に作成します。下記はemployeelist.componentを作成しています。

 

バックエンドの呼び出しはServiceに書きます。api/employeesにGETリクエストを投げます。(エラー処理略)

app.component.htmlは下記のようにして、新しく作ったComponentを呼び出すようにして、実際のリストの作成はemployeelist.componet.htmlで書きます。なんとなくマテリアルデザインにしました。

 

最後にバックエンド側にCORSの設定を追加します。

バックエンド側を起動し、フロントエンド側も起動すると一覧画面が開きます。

 

おわりに

今回は、Angular + Spring Boot のアプリケーションを実装して動作確認しました。前回までのReact.jsとの大きな違いは、Angularはバックエンドとフロントエンドと別々のプロジェクト組み合わせる感じになります。エンジニアが別々にいる場合は、同時に開発できて良さそうです。

あと、EclipseでAngularの開発しようとするとCodeMixのライセンス($5/月)が必要になります。CodeMixのコード補完は強力で大変ありがたいです。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です