AngularJSと連携できるAPIファーストWebフレームワーク「Synth」のチュートリアル #Angular

はじめに

AngularJSは素晴らしいフロントエンドフレームワークですが、それに見合うバックエンドのフレームワークがなかなか見つかりません。

AngularJS+PHP+MySQLで簡単な名簿アプリでPHPや、MongoDB+Express+AngularJS+Node.jsでシンプルなCRUDアプリ作成でExpressのバックエンドを試してみましたが、どうもしっくり来ず。

そんな中、APIを提供することに徹したフレームワークSynthを見つけ、これが求めていたものかもしれない、と思いチュートリアルを試してみることにしました。

必要なプログラム

Node.js: ver. 0.10.0 以上
npm: ver. 1.3 以上
MongoDB

自分は以下の環境で作成しました。

OS: Ubuntu ver. 12.04 LTS(precise64)
Node.js: ver. 0.10.29
npm: ver. 1.4.14
MongoDB: ver. 2.6.3

MongoDBのサービスを起動しておいてください。

Synthのインストール

npm install -g synth

アプリのひな形作成

synth new my_app

これでmy_appディレクトリにツイートアプリのひな形が作成されます。
データベース「tweets-db」のコレクション「tweets」にツイートを保存してゆくような形。

cd my_app

ディレクトリに入り、

synth install -b

npmを使用したバックエンドパッケージのインストール、

synth install -f

bowerを使用したフロントエンドパッケージのインストールを行います。

バックエンド

back/back-app.js がエントリポイントだと思います。

GETメソッド

back/resources/tweets/getTweets.js に最初から作られています。
内容は以下のような感じ。

exports.getIndex = function (req, res) {
  return req.db.collection('tweets').find()
    .sort({ created_at: -1 })
    .limit(30)
    .toArray().then(function (tweets) {
      return {
        tweets: tweets
      };
    });
};

resourceディレクトリの中にソースを作成するとAPI呼び出し用になります。
getIndexという名前により、/api/tweets にGETでアクセスしたときにtweetsコレクションの中身をJSONで取得できるようになります。
例えば、getIndexという名前をgetTestに変更すると、/api/tweets/test で取得できる感じです。
getTweets.jsというファイル名は特に決まりは無いようです。

POSTメソッド

back/resources/tweets/ディレクトリにcreateTweets.jsを作成してpost関数を追加します。
こちらもディレクトリ名、関数名は決まっていますが、ファイル名は適当で構わない感じです。

createTweets.js

exports.post = function (req, res) {
  if (!req.body.content) throw 422;

  return req.db.collection('tweets').insert({
    content: req.body.content.slice(0, 140),
    created_at: new Date()
  });
};

これで /api/tweets にPOSTでアクセスすると新しいツイートを追加できるようになります。

フロントエンド

AngularJS

front/js/controllers/tweets.jsのcontrollerメソッド内に以下を追記します。

tweets.js

$scope.publish = function () {
  $http.post('/api/tweets', { content: $scope.newTweet })
  .success(function (tweet) {
    $scope.tweets.unshift(tweet);
  });
  $scope.newTweet = '';
};

2行目、$httpのDIも忘れずに追加してください。

tweets.js

.controller('tweetsController', function ($scope, $http, data) {

全体としてはこんな感じです。

tweets.js

angular.module('my_app')
.controller('tweetsController', function ($scope, data, $http) {
  $scope.tweets = data.tweets;
  $scope.publish = function () {
    $http.post('/api/tweets', { content: $scope.newTweet })
    .success(function (tweet) {
      $scope.tweets.unshift(tweet);
    });
    $scope.newTweet = '';
  };
});

HTML

front/html/tweets/getIndex.jadeにテキストエリアを追加します。先頭部分に以下を追記してください。

getIndex.jade

textarea(ng-model="newTweet")
button(ng-click="publish()", ng-disabled="newTweet.length == 0") Publish

サーバ起動

synth s

でサーバを起動し、

http://localhost:3000/
にアクセスするとツイートアプリが動きます。

おわりに

バックエンドの本質的な部分のみをシンプルに書けると感じました。
もう少し深く試してみたいと思います。