AngularJSジェネレータでコマンドを使ってみる

YeomanとAngularジェネレータで手軽に環境構築

以前、ここ でYeomanとAnglarJSを使って簡単なサンプルを作ってみました。
あれからYeomanも1.0がリリースされましたし、改めてYeomanでAngularJSジェネレータを使用してみましょう。

環境構築方法

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

• OS : MacOS X 10.7.5
• Node.js : v0.10.8

YeomanとAngularJS用ジェネレータをインストール

npmを使用して、yoモジュールをインストールしましょう。
以前はbowerとgruntもいっしょにインストールする必要があったような気がしますが、yoだけでよくなったみたいです。
また、AngularJS用にgenerator-angularをインストールします。

% npm install -g yo
% npm install -g generator-angular

ちなみに、yoコマンドをそのまま実行すると、対話式インターフェイスが起動します。
次のように、インストールされているジェネレータから選択したり、ジェネレータの検索やインストールを行うこともできます。
たぶんここが1.0の新しいところだったような気がする。

% yo

Yeoman is a mask worn by the following members of the open-source community:

  Paul Irish, Addy Osmani, Mickael Daniel, Sindre Sorhus, Eric Bidelman,
  Frederick Ros, Brian Ford, Pascal Hartig, Stephen Sawchuk, and countless
  other contributors.

[?] What would you like to do?
  Run the Angular generator (0.4.0)
  Run the Mocha generator (0.1.1)
  Run the Titanium generator (0.1.0)
  Run the Webapp generator (0.4.1)
  --------
  Update your generators
❯ Install a generator
  Find some help
  Get me out of here!

では、AngularJS用アプリのひな形を作成しましょう。
yoコマンドでひな形を生成したあと、bowerとnpmを使用してモジュールをインストールします。

% mkdir angularSample && cd angularSample
% yo angular 
% bower install && npm install

テストもそのまま実行可能です。

% grunt test
・
・                                                                                                                                           
Elapsed time
concurrent:test    2s
autoprefixer:dist  140ms
karma:unit         4s
Total              6s

grunt serverでアプリが起動します。ブラウザも自動で起動します。

% grunt server

AngularJSジェネレータのコマンドを実行

AngularJSジェネレータでは、ルートやコントローラ等、いろいろなモジュールを生成できます。
では、下記コマンドを実行し、ルートを生成しましょう。コントローラとビューが追加されます。

% yo angular:route myroute                                                                                                                              
   create     app/scripts/controllers/myroute.js
   create     test/spec/controllers/myroute.js
   ・
   ・

生成されたapp/scripts/myroute.jsを下記のように修正しましょう。

'use strict';

angular.module('angularSampleApp')
  .controller('MyrouteCtrl', function ($scope) {
        $scope.message = "MyRoute!!!";
        $scope.getMessage = function(){
            return $scope.message;
        }
  });

app/views/myroute.htmlを次のように記述して、http://localhost:9000/#/myrouteにアクセスしてみましょう。
そのまま記述した内容が反映されます。

<p>This is the myroute view.</p>

<div ng-controller="MyrouteCtrl">
    <p>{{getMessage()}}</p>
</div>

また、次のようにすればコントローラを単体で追加することもできます。

% yo angular:controller user
create app/scripts/controllers/user.js
create test/spec/controllers/user.js

他にも、Directive,Filter,view,service,Decoratorといった、
AngularJSで使用される各種モジュールがコマンドで追加可能です。
コマンドで各ひな形を追加して、生成されたソースに詳細処理を記述していくかんじですね。

参考サイトなど

• AngularJS公式: http://angularjs.org/
• Yeoman公式: http://yeoman.io/