hatenob

プログラムって分からないことだらけ

AngularJSでWildfly上のリソースにアクセス

Wildfly上の～と言っておきながら、REST APIなので別にAPサーバ問わないわけですが、前回とかの続きなので一応付けておきました、という感じです。

以前、こちらのエントリでAngularJS使ったコードを写経しました。

AngularJSを触ってみた - hatenob

この時は完全にクライアントサイドだけの操作だったので、これをサーバ側と通信をした形に変えてみました。

実装範囲

お勉強の範囲で全部やるのはしんどいので、実装範囲は初期処理時にサーバの情報を取ってくるところだけにしておきます。
サーバ上のデータは予め登録しておくことにします。

構成

構成は、前々回とかにやったのと同じ。

  • Wildfly 8.2.0.Final
  • MongoDB 2.6.6

サーバ側（JAX-RS）

サーバ側は単に全データを取ってくるだけ。JPAを使ってMongoDBにアクセスするわけだけれども、このあたりの設定やJAPのEntityなんかは前々回のエントリをご参照ください。

Wildfly 8とHibernate OGMでMongoDBにJPA - hatenob

上のエントリでは登録処理をやってるけども、今回は取得なので、それようのコードを追加。

エンドポイント

リクエストを受けるところ。全取得してそれをそのままリストで返します。なお、「数万件あったらどうすんのよ」とかを一切考えていない、良い子はマネしちゃいけないコードです。

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public List<Todo> findAll() {
        return todoBean.findAll();
    }

EJB

呼ばれているEJB。JPQL使って全権取得してます。

    public List<Todo> findAll() {
        return em.createQuery("select t from Todo t").getResultList();
    }

これで書けるとプラットフォームを選ばないので、データストアをCouchBaseにしたりMySQLやMariaDBにしたりと、自由に変更できます。（もちろんOracleでもいいんですよ）

クライアント側（AngularJS）

先の写経元のコードに、$resourceを使ってRESTfulにアクセスするようにします。何分、AngularJSを良く、いや、全然分かっていないので、書く場所がここでよいのかは疑問です。

factory

リソース部分をfactoryを使ってserviceにしておきます。（この表現が正しいかも分かってない）

angular.module('App', ["ngResource"])
.factory('Todo', function($resource) {
    return $resource('http://localhost:8080/chanko-angularjs/rs/todo/:id');
})

service

todosサービスのadd関数は引数にtitleしか取れないので、done状態も取れるようにします。

this.add = function (title, done) {
    list.push({
        title: title,
        done: done
    });
};

GET

サーバはGETメソッドでID指定なしでリクエストすると全件返るという仕様です。これを初期表示時にやるわけですが、いくつかあるコントローラのどこに書けばよいのか分からない。
なのでMainControllerに書きました。

.controller('MainController', ['$scope', 'todos', 'Todo', function($scope, todos, Todo){
    Todo.query().$promise
        .then(function(datas) {
            angular.forEach(datas, function(todo) {
                todos.add(todo.title, todo.done);
            })
        });
    ...

$resourceのquery関数を使ってリクエストを投げ、全件返ってきたやつをリストに追加していくだけです。エラーハンドリングも一切していないので、これも良い子はマネしちゃいけないです。


これで初期表示時にサーバにアクセスし、TODOリストを初期化できるようになりました。追加・変更・削除なんかも同じ要領でできそうです（やらないけど）。

まとめ

何回かに分けて、AngularJSを使ったサンプルアプリを作ってみました。クライアントは完全コピーでサーバ側だけ作ったって感じだけれども。コードも断片的にしか載せていないので分かりにくいと思いますが、ご容赦を。Githubにあげようかとも思ったけれど完コピしてる部分があり、ライセンス表記を追加したりする手間がかかるのでやめました。リクエストがあれば頑張って整理することも考えますが、多分ないのでそのままにしておきます。