Windows上でYeomanでAngularJSアプリの雛形を作成

yeoman_angular.md

Windows上でYeomanでAngularJSアプリの雛形を作成

Node.jsをインストール

http://nodejs.org/

bowerをインストール

$ npm install -g bower

gruntをインストール

$ npm install grunt
$ npm install -g grunt-cli

generator-angularをインストール

$ npm install -g generator-angular

AngularJSアプリの雛形を作成

$ mkdir angular_sample
$ cd angular_sample
$ yo angular

動作確認

$ cd angular_sample
$ grunt build

※「Done, without errors.」と表示されれば成功

$ grunt serve

※ 自動的にブラウザが立ち上がり「'Allo, 'Allo!」が表示されれば成功

[補足1] yo angularでSass (with Compass)を使用するように指定した場合

RubyとCompassをインストールする必要があります。

Rubyのインストール

WindowsにRubyをインストールする場合は下記からバイナリをダウンロード
http://rubyinstaller.org/
※「Add Ruby executables to your PATH」にチェックを入れる事

Compassのインストール

$ gem update --system
$ gem install compass

※ インストールできない場合は「C:\RubyXXX\lib\ruby\gems\X.X.X\cache」内のキャッシュを削除

[補足2] AngularJSのバージョンを1.3.0にしたい場合

angular_sample/bower.jsonの"~1.2.0"を"~1.3.0"に変更する。

{
  "name": "angular-sample",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.0", ← "~1.3.0"にする。
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap-sass-official": "~3.2.0",
    "angular-resource": "~1.2.0", ← "~1.3.0"にする。以下、同様
    "angular-cookies": "~1.2.0",
    "angular-sanitize": "~1.2.0",
    "angular-animate": "~1.2.0",
    "angular-touch": "~1.2.0",
    "angular-route": "~1.2.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0",
    "angular-scenario": "~1.2.0"
  },
  "appPath": "app"
}

bower updateを実行

$ bower update