AngularJSジェネレータでコマンドを使ってみる
この記事は公開されてから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/
