yeomanのangular-fullstackでMEAN (MongoDB + Express + AngularJS + Node.js)アプリをお手軽に開発

yeoman MongoDB express Jade mongoose Karma bower Sass node.js HTML5 grunt AngularJS Javascript

クライアントサイドの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を選択しています。

f:id:slowquery:20140130023534p:plain

アプリ起動

MongoDB起動

mongod

アプリ起動

grunt serve

f:id:slowquery:20140130023708p:plain

ファイルを変更すると自動でリロードされます。

ディレクトリ構成

ディレクトリ構成はわかりやすく、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を読み込んでいる部分を変更します。