yeomanのangular-fullstackでMEAN (MongoDB + Express + AngularJS + Node.js)アプリをお手軽に開発
クライアントサイドのMV※フレームワークの一つにAngularJSがありますが、2012年にバージョン1.0がリリースされ、2013年になって一気に大流行しました。このAngularJSの流行に乗りながら、サーバサイドも含めてJavaScriptで開発するMEAN (MongoDB + Express + AngularJS + Node.js) 構成のスタイルにも注目が集まっています。
ここではyeomanの力を使って以下のような構成のMEAN+αアプリの雛形を簡単に生成してみます。
- yeoman
- yo
- bower
- grunt
- AngularJS
- node.js
- express
- passport
- jade
- sass
- Twitter Bootstrap 3
- MongoDB
- mongoose
- Karma
- CoffeeScript
今回はyeomanのgeneratorとして、全generator中第3位(MEANでは1位)のgithubスター数を獲得しているDaftMonk/generator-angular-fullstackを使用してみます。
前提条件
- node.js
- MongoDB
- compass (
gem install compass
)
インストール
yeomanのインストール
npm install -g yo
yeomanのangular-fullstackジェネレータのインストール
npm install -g generator-angular-fullstack
アプリ生成
angular-fullstackのアプリ雛形作成
mkdir [app name]
cd [app name]
yo angular-fullstack --jade
※--coffee
を付ければJavaScriptの代わりにCoffeeScriptが出力されます。
※angularとfullstackの間のハイフンが抜けていたので修正しました。
ウィザードでは、全てyesを選択しています。
アプリ起動
MongoDB起動
mongod
アプリ起動
grunt serve
ファイルを変更すると自動でリロードされます。
ディレクトリ構成
ディレクトリ構成はわかりやすく、app配下にはクライアントサイド(AngularJS)、lib配下にはサーバサイド(node.s + express)のリソースが格納されています。
. ├── Gruntfile.js ├── app : クライアントサイド (新規リソースはyo angular-fullstack:で生成) │ ├── bower_components │ ├── favicon.ico │ ├── images │ ├── robots.txt │ ├── scripts │ ├── styles │ └── views ├── bower.json ├── karma-e2e.conf.js ├── karma.conf.js ├── lib : サーバサイド (追加リソースは各自作成) │ ├── config │ ├── controllers │ ├── middleware.js │ ├── models │ └── routes.js ├── node_modules │ ├── bcrypt │ ├── connect-livereload │ ├── connect-mongo │ ├── express │ ├── grunt 略 │ ├── jade │ ├── jpegtran-bin │ ├── jshint-stylish │ ├── karma 略 │ ├── load-grunt-tasks │ ├── lodash │ ├── mongoose │ ├── mongoose-unique-validator │ ├── passport │ ├── passport-local │ ├── requirejs │ └── time-grunt ├── package.json ├── server.js : expressのメインファイルです └── test ├── runner.html └── spec
その他
今回は雛形作成までとして、今後より詳しい記事を書きたいと思いますが、幾つか必要な作業を書いておきます。
ページ(view)追加
新しいページ(view)を追加するには以下のコマンドを実行します。クライアントサイドのcontroller, route, viewがまとめて自動生成されます。
yo angular-fullstack:route [view名=route名]
注意
はじめに
--jade
や--coffee
を付けておくと、以降その設定は引き継がれ毎回指定しなくてもjadeやCoffeeScriptのファイルが生成されます。directive等も同様に生成できます。
ユーザ登録
初期状態だとユーザ登録してもMongoDBにユーザが登録されません。アプリを再起動する度にユーザを削除してテストユーザを作成しているためです。これを解除する為にはserver.jsからdummydata.jsを読み込んでいる部分を変更します。