makisuke report

Rails, Java, Solr, Elasticserach, Animation

Yeoman + AngularJS

| Comments

Yeoman_AngularJS

いろんな人がまとめてくれているので、この記事は「やってみた」って感じのメモです。

先に書いておくとこちらの記事をそのまま実践してみただけです。
こちらの記事を読むことをオススメします。

Startup!! Yeoman and AngularJS : Qiita Advend Calendar 2013 12/05

環境

Mac OS X 10.9.2

1
2
3
4
5
6
7
8
$ node -v
v0.10.25

$ npm -v
1.3.24

$ rbenv version
2.0.0-p247

node, npm は予めインストールしておきましょう。 ※ node に標準で npm が含まれています。
僕の場合は homebrew でインストールしました。

インストール

Yeoman, Grunt, Bower のインストール

1
$ npm install -g yo grunt-cli bower

AngularJS generator: generator-angular のインストール

1
$ npm install -g generator-angular

ひな形をジェネレート!

1
$ yo angular --minsafe angular-sample

--minsafe をつけると AngularJS を minify しても動く書き方で生成してくれます。
minify対策についてはこちらの記事が非常にわかりやすくまとめてくれています。

AngularJSのDIの仕組み、minify対策は覚えておこう!

いざ、作成!

yo_angular_console

幾つか質問されるので答えていきましょう。後から設定ファイルで変更も可能です。
今回は全て Yes にしました。

なお、 Compass を使う場合は予めインストールしておく必要があります。

1
$ gem install compass

これでひな形の作成は完了です。

ディレクトリ構成

ディレクトリ構成は以下のようになりました。
バージョンが変わると構成も変わるかもしれないので備忘録として残しておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ tree -L 2
.
├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── bower_components
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   ├── styles
│   └── views
├── bower.json
├── karma-e2e.conf.js
├── karma.conf.js
├── node_modules
│   ├── grunt
│   ├── # 省略
│   └── time-grunt
├── package.json
└── test
    ├── runner.html
    └── spec

確認

ブラウザで確認してみましょう。

1
$ grunt serve

上のコマンドを実行するとブラウザが立ち上がります。

yo_angular_preview

なんだか昔やってみた時とデザインが変わってる気がします。

これから

せっかくなのでこれを元に少しづつ肉付けしていきたいと思います。
気が向いたら。

脚注

最初、 yo angular を実行したらエラーになりました。
いざ実践してみると、簡単にはいかない時ありますからね。
やっぱり実践してみるのが大事です。そしてググればいいんです。

1
2
npm ERR! peerinvalid The package generator-karma does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer generator-angular@0.7.1 wants generator-karma@~0.6.0

同じ問題につっかかる人は誰かしらいるもんです。先人達に感謝、感謝。

Cannot install yeoman because ‘generator-karma does not satisfy its siblings peerDependencies #1065

過去にインストールした古いバージョンの generator-karma が残っていたようです。

1
2
$ npm uninstall -g generator-karma
$ npm install -g generator-angular

これで再度実行したら、うまくいきました。

Comments