AngularJSアプリの最上位のコンポーネントであるAngularJSのモジュールについて概要を簡単にまとめました。
※目次をクリックすると目次の下部にコンテンツが表示されます。
ディレクティブとは？
・ディレクティブによってHTMLを拡張し、機能を追加する事が出来ます。
・AngularJSによってデフォルトで５０以上のディレクティブが用意されていて（ビルトインディレクティブ）、すぐに利用できます。一方、自分でディレクティブを定義する（カスタムディレクティブ）事も出来ます。
・ビルトインディレクティブを使うことによって、データバインディング、フォームバリデーション、テンプレートの生成、イベントハンドリング、HTML要素の操作などを容易に行う事が出来ます。
・AngularJSによってデフォルトで５０以上のディレクティブが用意されていて（ビルトインディレクティブ）、すぐに利用できます。一方、自分でディレクティブを定義する（カスタムディレクティブ）事も出来ます。
・ビルトインディレクティブを使うことによって、データバインディング、フォームバリデーション、テンプレートの生成、イベントハンドリング、HTML要素の操作などを容易に行う事が出来ます。
ディレクティブの適用方法
ディレクティブの適用の仕方には、HTMLの要素、属性、クラスの３つがあります。各ディレクティブ毎にこの３つの指定方法のどれを使用できるかが決まっています。
①要素として適用した例
<ng-include src=”‘table.html'”></ng-include>
②属性として適用した例
<span ng-bind=”members.length”></span>
③クラスとして適用した例
<span class=”ng-bind: members.length”></span>
①要素として適用した例
<ng-include src=”‘table.html'”></ng-include>
②属性として適用した例
<span ng-bind=”members.length”></span>
③クラスとして適用した例
<span class=”ng-bind: members.length”></span>
主なビルトインディレクティブ
①データバインディングディレクティブ
モデルとHTMLビューとの間でデータをやり取りする。
ng-bind
ng-bind-html
ng-bind-template
ng-model
②テンプレートディレクティブ
テンプレートを使ってHTML要素を生成する。
ng-cloak
ng-include
ng-repeat
ng-repeat-start
ng-repeat-end
ng-switch
③要素を表示・非表示、追加・除去など行うディレクティブ
DOM内で要素を設定したりスタイリングを行う。
ng-if
ng-class
ng-class-even
ng-class-odd
ng-hide
ng-show
ng-style
④イベントディレクティブ
イベントをハンドリングする。
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-paste
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
⑤その他
ng-checked
ng-disabled
ng-open
ng-readonly
ng-selected
ng-href
ng-src
ng-srcset
モデルとHTMLビューとの間でデータをやり取りする。
ng-bind
ng-bind-html
ng-bind-template
ng-model
②テンプレートディレクティブ
テンプレートを使ってHTML要素を生成する。
ng-cloak
ng-include
ng-repeat
ng-repeat-start
ng-repeat-end
ng-switch
③要素を表示・非表示、追加・除去など行うディレクティブ
DOM内で要素を設定したりスタイリングを行う。
ng-if
ng-class
ng-class-even
ng-class-odd
ng-hide
ng-show
ng-style
④イベントディレクティブ
イベントをハンドリングする。
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-paste
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
⑤その他
ng-checked
ng-disabled
ng-open
ng-readonly
ng-selected
ng-href
ng-src
ng-srcset
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データをバインドして表示
カスタムディレクティブ