AngularJS TIPS - 処理対象別インデックス

世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載の処理対象別インデックス。【完結】

山田 祥寛

• この連載の RSS

【対応バージョン】
　AngularJS v1対応のTIPSです。
　Angular v2／v4以降に関しては「Angular TIPS」を参照してください。

処理対象別インデックス　 API別インデックス　 日付順インデックス

処理対象別インデックス

【サービス】 DOMツリー ／ オブジェクト結合 ／ クッキー ／ タイマー ／ ログ ／ 依存性注入 ／ 配列／オブジェクトコピー ／ 非同期通信 ／ 例外処理

【ディレクティブ】 コンテンツセキュリティポリシー ／ テンプレート ／ 自作

【基本】 Karma＋Jasmine ／ this ／ イベントリスナー ／ カスタムフィルター ／ コレクション ／ コントローラー ／ サービス ／ サービスコンポーネント ／ サービスの切り出し ／ スタイルプロパティ ／ ディレクティブ ／ データバインディング ／ テスト ／ ハイパーリンク ／ フィルターコンポーネント ／ フィルタリング ／ メッセージ管理 ／ メッセージ表示／非表示 ／ モジュール ／ モデル値の加工 ／ ライブラリインポート ／ ルーティング ／ 画像 ／ 関数コンポーネント ／ 繰り返し処理 ／ 数値文字列の桁区切り ／ 大文字／小文字 ／ 日付時刻 ／ 入力検証 ／ 配列／オブジェクトの列挙 ／ 配列の並べ替え ／ 表示／非表示

【式】 $event ／ {{1+2}} ／ {{プロパティ名}}

サービス

DOMツリー

•  - AngularJSで文書ツリーを操作するには？（element）
•  - AngularJSアプリでjQueryを利用するには？（element／ng-jq）

オブジェクト結合

•  - 複数のオブジェクトを結合するには？（extend／merge）

クッキー

•  - クッキーを読み書きするには？（$cookies）
•  - $cookiesサービスを利用する際の注意点とは？（$cookies）

タイマー

•  - 指定された時間の経過で処理を実行するには？（$interval／$timeout）

ログ

•  - ログをコンソールに出力するには？（$log）

依存性注入

•  - AngularJSの管理外でサービスを注入するには？（$injector）

配列／オブジェクトコピー

•  - 配列／オブジェクトをコピーするには？（copy）

非同期通信

•  - サーバーサイドと非同期通信するには？（$http）
•  - サーバーサイドとHTTP POSTで非同期通信するには？（$http）
•  - JSON形式のWeb APIにアクセスするには？（$http）

例外処理

•  - アプリ共通の例外処理を実装するには？（$exceptionHandler）

ディレクティブ

コンテンツセキュリティポリシー

•  - コンテンツ・セキュリティ・ポリシーを利用する（ng-csp）

テンプレート

•  - モデルをバインドするテンプレートを指定するには？（ng-bind-template）

自作

•  - ディレクティブを自作するには？（directiveメソッド）
•  - ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
•  - ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
•  - ディレクティブで属性を設定するには？（scopeプロパティ）
•  - 自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
•  - 自作ディレクティブの挙動を定義するには？（controller／controllerAs／bindToControllerプロパティ）

基本

Karma＋Jasmine

•  - AngularJSアプリの単体テストを実施するには？（準備編）
•  - AngularJSアプリの単体テストを実施するには？（実行編）
•  - AngularJSのサービスを単体テストするには？
•  - AngularJSのコントローラーを単体テストするには？
•  - AngularJSのディレクティブを単体テストするには？

this

•  - thisキーワードの参照先を固定するには？（bindメソッド）

イベントリスナー

•  - イベントリスナーを登録するには？（ng-clickなど）

カスタムフィルター

•  - フィルターを自作するには？（filterメソッド）
•  - パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
•  - 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
•  - AngularJSアプリの単体テストを実施するには？（実行編）

コレクション

•  - 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
•  - 配列の内容を順に出力するには？（ng-repeat）
•  - ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）

コントローラー

•  - AngularJSでコントローラーを定義するには？
•  - AngularJSの依存性注入を利用するには？
•  - AngularJSのコントローラーを単体テストするには？

サービス

•  - AngularJSを手動で起動するには？（bootstrap）
•  - ルーティング機能を実装するには？（$routeProviderプロバイダー）
•  - URL経由でパラメーター情報を引き渡すには？（$routeProviderプロバイダー）
•  - ルーティングの挙動／設定をカスタマイズするには？（$routeProviderプロバイダー）
•  - 配列／オブジェクトをコピーするには？（copy）
•  - $injectorサービスでサービスの取得／存在確認を行うには？（$injector）
•  - 複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
•  - 複数のコントローラー間で共有すべき値を管理するには？（constantメソッド）
•  - アプリ内でよく利用するビジネスロジックを定義するには？（serviceメソッド）
•  - アプリ内でよく利用するビジネスロジックを定義するには？（factoryメソッド）
•  - パラメーター付きのサービスを定義するには？（providerメソッド）
•  - AngularJSのサービスを単体テストするには？

サービスコンポーネント

•  - 文字列を大文字／小文字に変換するには？（lowercase／uppercase）

サービスの切り出し

•  - 複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
•  - 複数のコントローラー間で共有すべき値を管理するには？（constantメソッド）
•  - アプリ内でよく利用するビジネスロジックを定義するには？（serviceメソッド）
•  - アプリ内でよく利用するビジネスロジックを定義するには？（factoryメソッド）
•  - パラメーター付きのサービスを定義するには？（providerメソッド）

スタイルプロパティ

•  - 要素のスタイルプロパティを操作するには？（ng-style）
•  - 要素のスタイルクラスを操作するには？（ng-class）
•  - 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）

ディレクティブ

•  - 入力された区切り文字を配列に変換するには？（ng-list）
•  - 入力フォームに検証機能を実装するには？（form／input）
•  - 式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
•  - 別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
•  - 入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
•  - 要素のスタイルプロパティを操作するには？（ng-style）
•  - 要素のスタイルクラスを操作するには？（ng-class）
•  - 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
•  - 配列の内容を順に出力するには？（ng-repeat）
•  - ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）
•  - 画像を動的に生成するには？（ng-src／ng-srcset）
•  - 不正な入力値もモデルに反映させるには？（ng-model-options）
•  - 日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
•  - モデルへの入出力に際して処理を介するには？（ng-model-options）
•  - ディレクティブを自作するには？（directiveメソッド）
•  - ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
•  - ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
•  - ディレクティブで属性を設定するには？（scopeプロパティ）
•  - 自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
•  - 自作ディレクティブの挙動を定義するには？（controller／controllerAs／bindToControllerプロパティ）
•  - AngularJSのディレクティブを単体テストするには？

データバインディング

•  - モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
•  - モデルをビューにバインドするには？（ng-bind／ng-cloak）
•  - ビューにHTML文書をバインドするには？（ng-bind-html）
•  - モデルをバインドするテンプレートを指定するには？（ng-bind-template）

テスト

•  - AngularJSアプリの単体テストを実施するには？（準備編）
•  - AngularJSアプリの単体テストを実施するには？（実行編）
•  - AngularJSのサービスを単体テストするには？
•  - AngularJSのコントローラーを単体テストするには？
•  - AngularJSのディレクティブを単体テストするには？

ハイパーリンク

•  - ハイパーリンクを動的に生成するには？（ng-href）
•  - URL／メールアドレスからハイパーリンクを生成するには？（linky）

フィルターコンポーネント

•  - URL／メールアドレスからハイパーリンクを生成するには？（linky）
•  - 文字列を大文字／小文字に変換するには？（lowercase／uppercase）
•  - 数値データに桁区切り文字を付けるには？（number／currency）
•  - 配列をソートするには？（orderBy）
•  - 独自の規則で配列をソートするには？（orderBy）
•  - 配列の内容をフィルターするには？（filter）
•  - 自作の検索条件／比較ルールで配列を検索するには？（filter）
•  - JavaScriptオブジェクトをJSON形式に変換するには？（json）
•  - 日付／時刻データを整形するには？（date）
•  - 配列からm～n件目の要素を取り出すには？（limitTo）

フィルタリング

•  - 配列の内容をフィルターするには？（filter）
•  - 自作の検索条件／比較ルールで配列を検索するには？（filter）
•  - JavaScriptオブジェクトをJSON形式に変換するには？（json）
•  - 数値（単数／複数）によって表示を切り替えるには？（ng-plurlize）
•  - 日付／時刻データを整形するには？（date）
•  - 配列からm～n件目の要素を取り出すには？（limitTo）
•  - フィルターを自作するには？（filterメソッド）
•  - パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
•  - 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
•  - thisキーワードの参照先を固定するには？（bindメソッド）
•  - AngularJSアプリの単体テストを実施するには？（実行編）

メッセージ管理

•  - 別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）

メッセージ表示／非表示

•  - 式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）

モジュール

•  - AngularJSでモジュールを定義するには？
•  - 数値（単数／複数）によって表示を切り替えるには？（ng-plurlize）

モデル値の加工

•  - モデルへの入出力に際して処理を介するには？（ng-model-options）

ライブラリインポート

•  - AngularJSを利用するには？

ルーティング

•  - ルーティング機能を実装するには？（$routeProviderプロバイダー）
•  - URL経由でパラメーター情報を引き渡すには？（$routeProviderプロバイダー）
•  - ルーティングの挙動／設定をカスタマイズするには？（$routeProviderプロバイダー）
•  - $injectorサービスでサービスの取得／存在確認を行うには？（$injector）

画像

•  - 画像を動的に生成するには？（ng-src／ng-srcset）

関数コンポーネント

•  - 文字列を大文字／小文字に変換するには？（lowercase／uppercase）
•  - thisキーワードの参照先を固定するには？（bindメソッド）
•  - AngularJSを手動で起動するには？（bootstrap）

繰り返し処理

•  - 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
•  - 配列の内容を順に出力するには？（ng-repeat）
•  - ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）

数値文字列の桁区切り

•  - 数値データに桁区切り文字を付けるには？（number／currency）

大文字／小文字

•  - 文字列を大文字／小文字に変換するには？（lowercase／uppercase）

日付時刻

•  - 日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）

入力検証

•  - 入力フォームに検証機能を実装するには？（form／input）
•  - 不正な入力値もモデルに反映させるには？（ng-model-options）
•  - モデルへの入出力に際して処理を介するには？（ng-model-options）

配列／オブジェクトの列挙

•  - 配列／オブジェクトの内容を列挙するには？（forEach）

配列の並べ替え

•  - 配列をソートするには？（orderBy）
•  - 独自の規則で配列をソートするには？（orderBy）

表示／非表示

•  - 条件式の真偽に応じて表示を切り替えるには？（ng-if）
•  - 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
•  - 式の値によって表示を切り替えるには？（ng-switch）

式

$event

•  - イベントリスナーを登録するには？（ng-clickなど）

{{1+2}}

•  - AngularJSを利用するには？

{{プロパティ名}}

•  - AngularJSでコントローラーを定義するには？
•  - モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
•  - モデルをビューにバインドするには？（ng-bind／ng-cloak）
•  - ビューにHTML文書をバインドするには？（ng-bind-html）