AngularJSをやり始めて思ったこと。

普通に手作業でView作ってController作って・・・ってやってると結構めんどくさい。なんかある程度は自動化できないのかなー？と思ったら、普通にこの前の記事の本に載ってました。

YeomanというWebのひな形を作ってくれるツールを使えば、スムーズに開発が進められそうです。

というわけで、今日はこのYeomanを作ったAngularJS開発について。

ここを参考に。

必要なもののインストール

Yeomanをnpmを使ってインストールしていくので、brew install nodeとかでnodeとnpmはインストールしておきましょう。ここでは割愛します。

Yeomanのコマンドはyoです。1本体がなければ、話しにならないので、npmでYeoman本体をインストールしていきましょう。

npm install -g yo

次に、JavaScriptやCSS/Sassのライブラリを楽に導入できるようにするためにbowerを、Webの開発をスムーズに進めるためにgruntをインストールします。gruntに関しては以前、記事に書いたので、こちらをご参照ください。

npm install -g grunt-cli bower

次に、AngularJSのひな形を作成してくれるgenerator-angularをインストールします。

npm install -g generator-angular

あと、今回はCSSではなく、Sass(Compass)を使って行ってやろうと思うので、インストールされてなければ、

gem install compass

とかしてあげたらOKです。rbenvでRubyをインストールしている場合は、rbenv rehashとするのを忘れずに。

ここまでで準備完了。

作ってみる

ここからはここを参考に。

とりあえず、作業ディレクトリを作りましょう。例によって、自分は~/sandboxの中にangular-testというフォルダを作って、そこにAngularJSのひな形を作っていこうと思います。環境によって、このへんのパスは変えてください。

とりあえず、フォルダ作ってそこに移動。

mkdir ~/sandbox/angular-test
cd ~/sandbox/angular-test

さて、実際にひな形作ります。

yo angular testApp

testAppはアプリの名前になります。ご自由につけてやってください。

途中で、

お前、Sass使う？

とか

Bootstrap使う？

とか

SassバージョンのBootstrap使う？

みたいに聞かれると思いますが、そのあたりはお好みでいいと思います。自分はとりあえず、全部Yesと答えてます。

一回目はひな形作ってる途中でError吐くかもしれませんが、めげずにもう一度挑戦したら、なんかしらんけど通ります。

angular-test
┣ app/
┃  ┣ index.html # メインとなるHTMLファイル
┃  ┣ 404.html
┃  ┣ favicon.ico
┃  ┣ robots.txt
┃  ┣ images
┃  ┣ scripts
┃  ┃  ┣ app.js # routingやmoduleなどの設定
┃  ┃  ┗ controller/ # Controllerのフォルダ
┃  ┣ styles/
┃  ┗ views/ # Viewのフォルダ
┣ bower_componets/ # bowerでインストールしたjsやcssのフォルダ
┣ node_modules/
┣ test/
┣ bower.js
┣ Gruntfile.js
┗ package.json

こんな感じのディレクトリ構成でファイル群ができるとおもいます。

angular-testディレクトリ直下でgrunt serverを入れると、

自動的にGruntがwatchし始めてくれるので、あとはファイルを変更したら自動的にリロードされます。これでさくさく開発が進められます。

もしエラー履いたりした場合は、支持にしたがって、必要なパッケージをgemやらnpmやらでインストールしてやればOKだと思います。

まとめ

yeomanは、Ruby on Railsでいうrailsコマンドみたいなもんだと思っていればいいっぽい。使えるコマンドは違いますが。他にもGitHubにいろんな情報が載ってるので、詳しくはそちらを参照してみてください。

それにしてもコマンドでひな形をポンと作ってくれるといろいろはかどります。もっと勉強するぞー。

  1. 略しすぎだろ。 ↩