ご注意
- angularjs1.3を元にしております。
- 一つのプロジェクトで使用した経験を元に書いております。
angularjsの特徴
- scopeで区切られており、scope間の行き来はできるものの、うまく階層構造化されています。
- controllerを細かく分離することで疎結合でいつでも取り外しが可能です。
- データバインディングも強力なので自分が記述しなければいけない部分を局所化することができます。
- viewとjsの分離も上記のデータバインディングやscopeのおかげで綺麗にわけることが可能です。
階層構造(controllerの親子関係)について
- よくある階層構造として、パーツの中にパーツがあってといった時に使われます。
- header,footer,bodyなどでcontrollerをまず分けてから、それぞれの中でさらに分離といった感じが多いと思います。
`created by cacoo`
例えば上記だと
- 青: rootScope
- 赤: headerScope
- 緑: navigationScope
といった具体にパーツごとにcontrollerを分離させます。
階層構造の作成時の注意点
- あまりに深い階層構造でかつ、共通の呼び出しの場合、
$broadcast()などを使います。 - 理由として、
$scope.$parent.$parent.$parentなどといった具合で上階層のデータを抜き出す時に使えますがいくつ上の階層であるとか、ちょっと構造が変わるだけで破綻します。 - そういったときに、
$emit()や$broadcast()はすごく便利です。
２つの違いは上階層へのメッセージなのか下階層へのメッセージなのかです。
- $emit: 自分自身と親へのメッセージ
- $broadcast: 自分自身と子へのメッセージ
プロジェクト内では、動作していいかの制御に使っていました。
例えば、何かの作業中に上階層のボタンをクリックさせたくない等です。
scope.$parent.hoge = function() {
scope.$emit('callToControllerDoNotClick');
};
環境変数の分離
- value以下に環境ごとのjsを作成して環境ごとに読み込むファイルを変えていました
パフォーマンス改善
- AngularJS Batarangのchrome extensionをいれればだいたいは直せると思います。
- 複数の行を読み込む場合はwatch数に気をつけつつ、初回に読み込むものは減らす。例えば、カーソルかぶせて表示とかの場合、カーソルかぶせるまでは表示自体なかったことにする等です。
ngIfを使ってみると良いかと思います。
終わりに
- angularjsを使ってみて思ったことは、ライブラリが多いので工数削減ができることと、自分で書くべきところが少ないのでバグが起こる可能性は減ると思いました。
- ただし、controllerの分離をうまくやらないとデータの移動が面倒だったりしたので設計がより重要だと思ってます。