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