Angular 1.5 でコンポーネント指向で書いてみた時の所感
今仕事でも Angular 1.5 を使っていてコンポーネント指向でアプリを作ってみた結果、例えば Java で Web アプリを作る時に比べて特定スコープごとの値を入れる場所が足りないと感じた。 当たり前だけど、下記で話しているデータは localStorage 等に入れない限り、ブラウザリロードすればデータが消える点に注意。
- 画面を跨ぐデータ
- 画面を跨ぐデータはこのサービスに入れる
- URL単位のデータ
- URL が変わったらクリアされてほしい
実装
詳しくはググってください。
- 画面を跨ぐデータ
- service に突っ込めばコントローラー間で参照できる
- 画面単位のデータ
- ng-view で画面遷移を管理しているなら $viewContentLoaded イベントでクリアする
- 単純にコントローラーで持ってしまっても構わない
Spring MVC の例
参考に Spring MVC のスコープの種類を引用。
- singleton
- prototype
- request
- session
ディレクトリ構成
こんな感じ。
- index.html
- js/
- angular.module() で初期化
- component/{name}/{html,js,css}
- page/ {name}/{html,js,css}
- ng-view で切り替える画面ごとのコントローラー
component や directive の require は親子関係にないディレクティブ同士では使えない
component だけでなく directive もそうだけど、コンポーネント指向で書いてた時にハマったポイントをついでに書く。 自分は component から入門したのでてっきりこの記事を見て別の component/directive の controller を参照できるものと思い込んでいた (HTML の親子関係は全く関係ないと思ってしまってた)。 で、実際使ってみてエラーが出てハマった。
今後について
仕事なので諸事情は言えないが、まだ複数人でコーディングしているとは言いがたい状況なのでこの構成で他の人にも分かりやすいかは分からない。 スキル的にはバラバラだけどあまり普段 JavaScript 書いてない人もいるのでこのまま行くかどうかは分からない。 適宜柔軟に変えていき、主張する所は主張していきたい。
