• この連載の RSS

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

処理対象別インデックス

【サービス】 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）