AngularJSにおけるパーツ実装の持論（Directive、Controllerとng-Includeのソース分割の持論）

AngularJSのWebアプリを作る上でパーツに分けて実装することは当然発生し、その際に、DirectiveとControllerとng-includeをどう分割して使い分けするか？と迷いが生じることが必ず出てくる。

まだ、浅い実装経験の中で感じたポイントを簡単にまとめてみる。

• Directive

  • あったら便利なヘルパーやよく使う処理などを実装するのがいい感じ。
  • どちらかというと案件とプロジェクトを跨ぐような普遍的な機能の実装が望ましいと思う。
    • 例えば、最大30文字以上の文字列は「...」を末尾に付けて省略表示するみたいな。文字数などはconfigurationファイルに逃がすとかなどを行う。
  • Controllerに比べて、Karmaのユニットテストを実装し辛い
    • 個人的にはどういう風に実装するのか模索中でうまくいっていない
    • こんな記事もあったので考えてみたい: http://www.sitepoint.com/angular-testing-tips-testing-directives/
  • 修正箇所を追いにくい。
    • タグや属性名でgrepしたりしないとファイルの所在がわからないことが多そう

• ng-include

  • Directiveに比べると修正箇所（ファイルそのものも含めて）を探しやすい
    • 探しやすい理由は、パス指定でディレクトリ階層が明確になるから
  • 利用するとしたら顧客要望に直結した仕組みを実装するパーツとして利用する
  • Controllerを書くまでもないViewだけで済む処理を書くのが良い感じ
  • $scopeの取り扱いがControllerやDirectiveを利用した時に比べると簡単 　　* テストはProtractorなどe2eテストでやるしかない

• Controller

  • 言わずもがな各種制御につかえてテストもしやすい
  • 要望や依頼された機能を作る場合に実装するのがいい感じ。Karmaを介したテストコードも書きやすい。
  • 例えば、一覧画面の一覧表示出力など

これまでの実装の流れ。

1. ng-controllerで、大枠を定義
   1. Routingを使うなら必然的にControllerを利用する。
   2. ng-controllerで動的エリアを定義する
   3. Controller内ではDIを経由して各種Serviceを利用
2. ng-repeatを使ってデータの種類に合わせて表示レイアウトが変わる場合、ng-includeを利用
3. ループで表示するデータの普遍的な加工が必要な場合、共通化できそうならDirectriveを実装する。共通化できないならTemplateで実装するかController側でメソッド実装する
4. 仕様にかかわるようなデータ加工は、ngResourceを利用してデータをResourceクラス経由で取得し、データ加工メソッドを実装する

Directiveに関しては利用方法を模索中。Protractorでテスト実装すること前提で今は、ngIncludeで十分と思ってしまっているため、今後のためにDirectiveも使えるようになるべく、AngularJSにかかわる作業を仕事でやってみたい。