AngularJSを使うならgenerator-angularがかなりbest way なのでは。というお話「概要編」
結論
特にこだわりや制約がない場合はgenerator-angularを使用すると開発が捗る
muzi:blog mogetta$ node -v
v0.10.21
概要
https://github.com/yeoman/generator-angularは
yeomanのテンプレートなんですが
AngularJSを使うのにかなり便利というお話
前提の知識として、yeoman,grunt,bowerなどが必要になりますが
node.jsのインストールさえできればコマンドを叩くだけなので難しくはありません。
使用ライブラリ
使い方を知っていると捗るpackageなど
- livereload
- karma
- compass
- jshint
使用することによる利点
-
yo angularを使うことによりページやサービスの新規追加が捗る
-
bowerによるフロントエンドのパッケージマネージメント
-
gruntfileが用意されている。以下のタスクなどがある
-
ローカルにサーバを建てる
-
livereloadタスク
-
ファイルのminifyタスク
-
.jshintrcに基づいたチェック
-
karmaを利用したtestの実行体制を用意する。
yo angular
fig.1 yo generator
例えば、新規のルーティング（/newpage）をAngularJS上で作る場合、
- コントローラを用意する newpage.js の作成
- ビューとなるテンプレート newpage.html の作成
- ルーティングを決める app.jsに/newpage を記述
- index.htmlに newpage.js を埋め込む
- テストを記述するための test/newpage.js もついでに作成
と５つのステップが必要になります。手がかかりますね。
なのでgenerator-angularの新規テンプレート作成の機能を使います。
https://github.com/yeoman/generator-angular#route
yo angular:route newpage
すると、上記５つのステップをすべて自動で行ってくれます。
controllerのテストファイルも追加してくれるのでテスト追加忘れも防げそうですね。
同様にserviceやview,directiveもyo angularで追加可能です。
fig2. yo angularで構成されるプロジェクト
gruntによる作業の効率化。
yo angularを使うとgruntfile.jsも用意されています。
このgruntfileにはlivereloadタスクやminify,確認用のサーバー設置やテストの実行といったタスクが
用意されており、開発を円滑に進めることができます。
build
また、yo angularを使った開発フローを採用するとindex.htmlに
livereload
livereloadを使う場合はchromeのプラグインがおすすめです。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
まとめ
以下の様な作業フローになります
- yo angular myappでアプリ作成
- yo angular:route,yo angular:directiveなどを使って、新規の開発
- grunt serveを使ってサーバーを立てて、動作させてみる。livereloadを使って効率的にチェックを行う。
- karmaを使ってテストを実行する
- grunt buildで、ファイルをまとめ、minify化し、distディレクトリに出力する。
おまけ：使用コマンドなど
Loading …
