読んで他人の書いたディレクティブなんとなく読めるようになった
手動かしてないから自分では全くうまいこと書ける気しない
どんなサービスがあるとかこういう場合にはこれを使った方が良いといった意見がまとまってて良かった。
ほんの少しでもAngularに触れた事のある人が網羅的に学びたいという時に読むべき本という感じ。
ビルドインディレクティブのとこで出てきたの
- model-option: 束縛を遅延させたり出来る
- ng-href, ng-src: 代入前の変なリンクを抑制
サービス
- anchorScroll: location.hashにセットしたとこに移動する
- rootScope: globalなスコープになるので避けたい
- ngCookies cookieStore: cookie楽に使える
- ngTouch: スマホ対応とか
- ng-repeatのasを用いたfilter後の変数代入
- angular.elementのoneによりイベントの重複登録を防ぐ
module
- moduleの第二引数の有無で新規作成か取得かが変わる
- factoeyは共有するオブジェクトや関数を返す関数をとうろ
- ng-strict-diでアノテーションを必須に
- configはサービスのインスタンス生成前に呼ばれ、providerとconstantで登録したサービスのみDI可能
- runは全てのモジュール読み込み後に実行
- injector.invoke?p138
スコープ
- emit: 派生元のスコープにイベントを送信?158
- broadcast: 派生先ry
スコープの監視
- watch
- watchGroup: 複数データの変化をまとめてチェックさせる
- watchCollection: 配列の変化をチェック（追加と削除のみ変更は通知されない）
値の更新が重複して$digest already in progressとなる場合は$timeout(function(){});で囲む
- $httpProvider.defaults.tranaformRequest/transformResponse: hook
呼び出す度に異なる結果となるフィルターは作れない（短時間のうちに同じ値が返ってくるものは作れる）
サービス
- value: コントローラとサービスで値を共有
- constant: ディレクティブやプロバイダのコンフィギュレーションで値を共有
- factory: 共有したいオブジェクトを返す関数を登録
- service: 共有したいオブジェクトのコンストラクタ関数を登録（作成されたインスタンスが複数サービスやコントローラで共有される）
- どちらもシングルトンとして同じインスタンスが共有される
- serviceは必ずnewされるのでプリミティブ型を提供出来ない
- altjsではserviceが使いやすい
- provider: value, factory, serviceの内部で使われてる、configでパラメータの設定が可能
- configで利用する際は"サービス名+Provider"という名前を用いる
- 9-2 サービス実装のコツと例: 使い分けを説明
- 上記5つのサービスは全てシングルトンとして扱われる
- 何らかのインスタンスを都度作成したいときはnewする関数をfactoryで返す
- 表9.6の比較(220p)
ディレクティブ
compile → link → $digest loop
- $digest loop: 最初及び、$applyで実行される
- $asyncQueue, $watchers
- watch式で値が変化していなければ$digest loop終了
- watchの多用は避けて、watch式の中には時間を要する処理を実装すべきで無い
- one-time bindingの利用
- 監視が不要になったらscopeを破棄する
- digest loopの最大実行回数をrunで変更可能（普通は必要無いはず）
directive properties
- replace: boolean, デフォルトはfalse
- restrict: A(属性名), E(要素), C(クラス名), M(コメント)
- scope: false(default: 共有), true(新規スコープ作成), 分離スコープ
- 分離スコープ(新規スコープを作成)
- "=": データバインディングとして結びつける(modelの名前とかそのままいれる)
- "@": 文字列として結びつける(文字列入れる)
- "&": functionとして結びつける
- 属性名は省略してもいい
- transclude
- false: デフォルト(元々ある子要素のdomを入れ替える)
- true: テンプレート内のng-transcludeに子要素のdomを展開して表示する
- ‘element’: ディレクティブを適用した要素全体がng-transcludeで展開される
- link関数の5番目の引数にtransclude関数が渡り、子要素が取得出来る
- transcludeとreplaceを使いまわすと読むの大変そう
- multiElement
- true: -startを付与した開始要素と-endを付与した修了要素で1つのディレクティブを指定出来る
- link関数の2番目の引数に間に入った要素が配列として渡ってくる
- compile: function
- 第一引数: ディレクティブが適用された箇所の要素
- 第二引数: ディレクティブが適用された要素の属性
- 第三引数: ディレクティブの子要素を展開する関数
- link関数: function, compile関数の引数に加えてscopeとcontrollerが引数として利用出来る
- 実行タイミングの異なるpreLinkとpostLinkを定義出来る
- 関数を1つしか定義しなかった場合、postLinkとなる
- scopeやcontrollerを使えないが、実行タイミングがlink関数より早い
- ng-repeatの中で使う場合にはcompileは1度しか呼ばれないがlinkは毎度呼ばれる
- priority: int
- 同一要素に複数ディレクティブが適用されていた場合にその順序を指定(ビルトインディレクティブにも優先度がある)
- 通常は親要素から深さ優先探索で決まるので、同一要素の比較時のみに効く
- terminal: boolean
- trueにすると、ディレクティブの子要素のcompile関数とlink関数が実行されない
- 同一要素に複数ディレクティブがある時、terminal=trueとなるディレクティブより優先度の低いディレクティブは実行されない
- controller
- 引数に通常のサービスDIのみならず以下のものが利用出来る
- `$scope`: 適用されてるスコープのインスタンス
- `$element`: 適用されてる要素
- `$attrs`: 適用されてる要素の属性
- `$transclude`: 子要素を扱う関数
- 実行結果は、link関数の第4引数で利用可能
- controllerAs: string
- コントローラに別名を付け、テンプレートの中からスコープのように参照出来る
- require
- ディレクティブが依存するディレクティブを指定することが出来る(e.g. require: 'ngModel')
- 頭に'?'をつけると、省略可能
- 頭に'^'をつけると依存するディレクティブを祖先の要素から探す
- 配列で複数指定可
