Yeomanを使ってAngularJSアプリのひな形をつくってみる

Yeoman&Angular入門

#JavaScript

#Yeoman

#Angular

中村修太

2013.06.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AngularJSが人気上昇中らしいです

少し前にJavaScriptフレームワークの人気を集計した結果が発表されてました。(Githubのwatcher数をみてるらしい）
圧倒的にbackbone.jsが抜けてますが、AngularJSもここ数ヶ月で急上昇しています。
backboneは少しだけ使ったことがありますが、AngularJSはいままであまり使ったことがありませんでした。
ここでもAngularJSの紹介をしていますが、いい機会なので、この記事ではYeomanをつかってAngularJSを動かしてみます。

AngularJSとは

AngularJSとは、Googleとユーザーコミュニティによって開発されているオープンソースのJavaScriptフレームワークで、昨年バージョン1.0がリリースされました。
データのバインディングとテンプレートエンジン機能によって、JavaScriptでMVCの構造をシンプルに表現することができます。
(CRUD系アプリ開発を得意にしているようで、DIを採用している)
公式ドキュメントにあるシンプルなAngularJSの例をみてみましょう。

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

上記HTMLに適当な名前をつけ、ブラウザで開いてみてください。
テキストフィールドに文字を入力すると、h1タグの表示がリアルタイムで変更されます。
このサンプルのポイントは次の点です。

htmlタグにng-app属性を追加することで、AngularJS機能が使えるようになる
テキストボックス「ng-model属性」とh1タグ部分の「{{yourName}}」で、双方向のデータバインディングを指定

また、データバインディング以外にもurlとビューを簡単に定義したり、カスタムタグが利用できたりできます。
こんな感じでAngularJSを使用することができますが、今回はYeomanを使ってAngularJSのひな形を生成してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

OS : MacOS X 10.7.5
Node.js : v0.10.8
npm : 1.2.23

Yeomanを使ってAngularJSのひな形を生成するためのに必要なモジュールをインストールします。
※Yeomanについてはこのへんを参照
yo(Yeoman)、Grunt、bowerに加え、AngularJS用ジェネレータであるgenerator-angularもインストールします。

% npm install -g yo grunt-cli bower
% npm install -g generator-angular
% mkdir angular-sample
% cd angular-sample

AngularJSのひな形を生成してみる

では、AngularJSのひな形を作ってみましょう。generator-angularをインストールすれば、Yeomanでangularコマンドが使用できます。
次のコマンドを実行すれば、必要なファイルがすべて生成されます。
途中いくつか質問されますが、すべてNoを選択します。
ちなみに、--coffeeオプションを指定すると、coffee scriptで生成されます。