AngularJSのスコープの仕組みについてまとめ、$rootScopeを使ってイベントを伝播する方法を確認しました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
スコープの概要
スコープの$watch、$digest、$applyについては下記記事参照。
$watch、$digest、$applyの概要
１）概要
・スコープはアプリケーションのモデルを参照するオブジェクトで、アプリケーションコントローラとビューの間を結びつける。
・スコープはexpressionをウォッチし、イベントを伝播する。
・スコープの$watchメソッドでモデルの変化を監視できる。
・スコープの$applyメソッドでAngularアプリの外部からビューにモデルの更新を伝播できる。
・スコープはネストしてアクセス範囲を制限することもできれば、共有する事も出来る。
{{name}}などのexpressionを評価するとき、該当要素のスコープ最初に確認し、無い場合はスコープの階層の上位を順番にルートスコープまで探す。
・ネストされたスコープは子スコープまたはisolateスコープとなる。
・子スコープは、親スコープから属性を継承するが、isolateスコープは継承しない。
・スコープはexpressionが評価されたものに対してコンテキストを提供する。
２）DOMとスコープ
・スコープは、DOMに$scopeデータ属性としてDOMに割り当てられる。
$watch、$digest、$applyの概要
１）概要
・スコープはアプリケーションのモデルを参照するオブジェクトで、アプリケーションコントローラとビューの間を結びつける。
・スコープはexpressionをウォッチし、イベントを伝播する。
・スコープの$watchメソッドでモデルの変化を監視できる。
・スコープの$applyメソッドでAngularアプリの外部からビューにモデルの更新を伝播できる。
・スコープはネストしてアクセス範囲を制限することもできれば、共有する事も出来る。
{{name}}などのexpressionを評価するとき、該当要素のスコープ最初に確認し、無い場合はスコープの階層の上位を順番にルートスコープまで探す。
・ネストされたスコープは子スコープまたはisolateスコープとなる。
・子スコープは、親スコープから属性を継承するが、isolateスコープは継承しない。
・スコープはexpressionが評価されたものに対してコンテキストを提供する。
２）DOMとスコープ
・スコープは、DOMに$scopeデータ属性としてDOMに割り当てられる。
・ルートスコープがDOMのどの要素に割り当てられるかはng-appディレクティブの位置によって定義される。
通常はng-appディレクティブは<html>要素に記述されるが他の要素にも置くことが出来る。
３）スコープでイベントを伝播
①$on(name, listener)
指定されたタイプのイベントをリッスンする。
・name：イベントの名前
・listener：イベントが発行されたときに実行される関数
②$emit(name, args)
スコープ階層の親の方向へイベント伝播
・name：イベントの名前
③$broadcast(name, args)
スコープ階層の子供の方向へイベントを伝播
４）デバッガーでスコープを調べる方法
①ブラウザ上の調べたい要素上で右クリック押下し、「要素を調査」をクリック。
選択した場所がハイライトされた状態でブラウザデバッガーが表示される。
②「コンソール」タブをクリック。
③コンソールでangular.element($0).scope()を実行する。
・現在選択している要素にアクセスするには”$0″を指定。
・その要素に関連するスコープにアクセスするにはangular.element().scope()を実行。
スコープとディレクティブ
１）{{expression}}のような監視ディレクティブ
・$watch()メソッドを使ってリスナーを登録。
・expressionが変化するたびに通知される必要があり、それによってビューを更新できる。
２）ng-clickのようなリスナーディレクティブ
・DOMと共にリスナーを登録。
・DOMリスナーが検知すると、そのディレクティブは指定されたexpressionを実行し、$apply()メソッドを使ってビューを更新する。
３）スコープを生成するディレクティブ
・たいていの場合はディレクティブとスコープは関連しあうが、スコープの新しいインスタンスを作成しない。
・ng-controllerやng-repeatなどの一部のディレクティブは新しい子スコープを生成し、その子スコープを対応するDOM要素に割り当てる。
●ng-controllerディレクティブ
・コントローラのクラスをビューに割り当てる。
・MVCのうちのモデルがスコープの属性で、スコープはDOMに割り当てられる。スコープの属性はバインディングでアクセスする。
・ng-controllerは新しい子スコープを生成する。
●ng-repeatディレクティブ
・コレクションの各項目ごとにテンプレートをインスタンス化する。
・それぞれのテンプレートインスタンスは、固有の子スコープを割り当てられる。
・$watch()メソッドを使ってリスナーを登録。
・expressionが変化するたびに通知される必要があり、それによってビューを更新できる。
２）ng-clickのようなリスナーディレクティブ
・DOMと共にリスナーを登録。
・DOMリスナーが検知すると、そのディレクティブは指定されたexpressionを実行し、$apply()メソッドを使ってビューを更新する。
３）スコープを生成するディレクティブ
・たいていの場合はディレクティブとスコープは関連しあうが、スコープの新しいインスタンスを作成しない。
・ng-controllerやng-repeatなどの一部のディレクティブは新しい子スコープを生成し、その子スコープを対応するDOM要素に割り当てる。
●ng-controllerディレクティブ
・コントローラのクラスをビューに割り当てる。
・MVCのうちのモデルがスコープの属性で、スコープはDOMに割り当てられる。スコープの属性はバインディングでアクセスする。
・ng-controllerは新しい子スコープを生成する。
●ng-repeatディレクティブ
・コレクションの各項目ごとにテンプレートをインスタンス化する。
・それぞれのテンプレートインスタンスは、固有の子スコープを割り当てられる。
ルートスコープ
１）ルートスコープの概要
・すべてのAngularJSアプリは一つのルートスコープを持っているので、ルートスコープを使って複数のコントローラ間で情報をやり取りすることが出来る。
・$rootScopeサービスとして提供されているので、利用するときには依存性の引数に$rootScopeを指定する。
・$broadcast(name, args)、$emit(name, args)、$on(name, handler)メソッドを使ってイベントの送受信を行う事が出来る。
２）$rootScopeを使ってコントローラ間でデータをやり取りするサンプル
デモとコードサンプルはこちら。
・すべてのAngularJSアプリは一つのルートスコープを持っているので、ルートスコープを使って複数のコントローラ間で情報をやり取りすることが出来る。
・$rootScopeサービスとして提供されているので、利用するときには依存性の引数に$rootScopeを指定する。
・$broadcast(name, args)、$emit(name, args)、$on(name, handler)メソッドを使ってイベントの送受信を行う事が出来る。
２）$rootScopeを使ってコントローラ間でデータをやり取りするサンプル
デモとコードサンプルはこちら。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ