AngularJS TIPS
AngularJSの基本機能を目的別リファレンスの形式でまとめる
-
77
自作ディレクティブの挙動を定義するには？（controller／controllerAs／bindToControllerプロパティ）
テンプレートに基づき出力されるHTMLコードの内容を、イベントハンドラーなどを活用して動的に切り替えるために、コントローラー付きの独自ディレクティブを作成する方法を説明します。
-
76
自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
自作ディレクティブの呼び出し側で指定した「属性の値（Angular式や関数）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明します。
-
75
ディレクティブで属性を設定するには？（scopeプロパティ）
自作ディレクティブの呼び出し側で指定した「属性の値（文字列）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明します。
-
74
ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
自作ディレクティブの呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明します。
-
78
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「ディレクティブ」の単体テストを記述し、それを実行する方法を解説します。
-
73
ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
ビューの操作／生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説します。また、ビューの中で＜script＞要素としてテンプレートを宣言する方法も説明します。
-
72
ディレクティブを自作するには？（directiveメソッド）
AngularJSで、ビューの操作／生成を独立させて独自ディレクティブを作成する基本的な定義方法と使用例を説明します。
-
71
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「コントローラー」の単体テストを記述し、それを実行する方法を解説します。
-
70
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「サービス」単体テストを記述し、それを実行する方法を解説します。
-
69
AngularJSアプリの単体テストを実施するには？（実行編）
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSアプリの単体テストを記述して、それをテスト実行するまでの手順を説明します。
-
68
AngularJSアプリの単体テストを実施するには？（準備編）
AngularJSで一般的に採用されているテスティングフレームワーク「Karma＋Jasmin」による単体テスト環境を構築する手順を説明します。
-
67
パラメーター付きのサービスを定義するには？（providerメソッド）
value／service／factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめます。またproviderメソッドを使ってサービスを定義する方法を解説します。
-
66
アプリ内でよく利用するビジネスロジックを定義するには？（factoryメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明します。
-
65
アプリ内でよく利用するビジネスロジックを定義するには？（serviceメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明します。
-
64
複数のコントローラー間で共有すべき値を管理するには？（constantメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はconstantメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明します。
-
63
複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はvalueメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明します。
-
62
日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を<input>要素から取得する方法を説明します。
-
61
モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明します。
-
60
不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されません。この制限を回避して反映させる方法を説明します。
-
59
画像を動的に生成するには？（ng-src／ng-srcset）
<img>タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明します。
-
58
モデルをバインドするテンプレートを指定するには？（ng-bind-template）
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明します。
-
57
$injectorサービスでサービスの取得／存在確認を行うには？（$injector）
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has／get／instantiateメソッドを解説します。
-
56
AngularJSの管理外でサービスを注入するには？（$injector）
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できます。その基本的な利用方法を説明します。
-
55
複数のオブジェクトを結合するには？（extend／merge）
angular.extendメソッドを利用して、既存の複数のオブジェクトを結合する方法と注意事項を解説します。また、入れ子になったオブジェクトを再帰的にマージする方法も説明します。
-
54
コンテンツ・セキュリティ・ポリシーを利用する（ng-csp）
セキュリティフレームワーク「CSP」による制限ポリシーを有効にした場合に、AngularJSでは特定のケースでエラーとなります。そのケースの内容と回避方法を解説します。
-
53
配列／オブジェクトのコピーには、シャローコピーとディープコピーとがあります。 その違いに注目し、JavaScript標準のconcatメソッドを使う場合とAngularJSのcopyメソッドを使う場合について説明します。
-
52
ルーティングの挙動／設定をカスタマイズするには？（$routeProviderプロバイダー）
「テンプレートを文字列で指定（templateパラメーター）」「リダイレクト時の規則をカスタマイズ（redirectToパラメーター）」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げます。
-
51
URL経由でパラメーター情報を引き渡すには？（$routeProviderプロバイダー）
ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説します。
-
50
ルーティング機能を実装するには？（$routeProviderプロバイダー）
AngularJSではngRouteモジュールを利用したルーティングが可能です。その基本的な用法（ルーティングの定義／コントローラー／テンプレートなど）について解説します。
-
49
AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用します。その基本的な使い方を解説します。
-
48
thisキーワードの参照先を固定するには？（bindメソッド）
分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説します。
-
47
既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説します。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成します。
-
46
パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明します。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみます。
-
45
独自のフィルターを作成するための基本的な手順を説明します。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成します。
-
44
AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説します。また、常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明します。
-
43
AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨ですが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用します。その基本的な使い方を説明します。
-
42
アプリ共通の例外処理を実装するには？（$exceptionHandler）
AngularJSの$exceptionHandlerサービスは、アプリ内でキャッチされなかった例外を最終的に処理します。今回は、その挙動を上書きして、独自の処理を実施する方法を紹介します。
-
41
$cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更されました。具体的に何が変わったかを解説します。また、アプリ全体で共通のクッキーオプションを設定する方法も説明します。
-
40
AngularJSが提供する機能を利用してクッキーを読み／書き／削除する方法を解説します。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明します。
-
39
angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説します。
-
38
指定された時間の経過で処理を実行するには？（$interval／$timeout）
ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説します。また、一定時間後に処理を実行する$timeoutサービスについても説明します。
-
37
JSON形式のWeb APIにアクセスするには？（$http）
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明します。
-
36
サーバーサイドとHTTP POSTで非同期通信するには？（$http）
AngularJSでHTTP POSTで非同期通信する方法を説明します。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介します。
-
35
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明します。また、ログの種類や、ショートカットメソッドについても紹介します。
-
34
AngularJSで開発者ツールのコンソールにログを出力する方法を説明します。また、ログの種類や、デバッグログの表示／非表示の切り替え方法も紹介します。
-
33
ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ（連想配列）」「複数の要素セット」の内容を順に処理して出力する方法を説明します。
-
32
配列の内容を順に処理して出力できるng-repeatディレクティブの基本的な使い方を説明します。
-
31
交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
ng-class-even／ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明します。
-
30
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明します。
-
29
要素のスタイルプロパティを操作するには？（ng-style）
ng-styleディレクティブを使って、要素のスタイル（style属性）を設定・変更する方法を説明します。
-
28
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明します。応用例としてページング処理を実装します。
-
27
dateフィルターを使って、日付／時刻データを任意の書式に変換する方法を説明します。ロケールの指定方法についても解説します。
-
26
数値（単数／複数）によって表示を切り替えるには？（ng-plurlize）
ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明します。
-
25
ng-switchディレクティブを使って、与えられた式の値に応じて、表示すべきコンテンツを切り替える方法を説明します。
-
24
JavaScriptオブジェクトをJSON形式に変換するには？（json）
jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明します。
-
23
自作の検索条件／比較ルールで配列を検索するには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説します。
-
22
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説します。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介します。
-
21
独自の並べ替え規則を使って、配列の内容を並べ替える方法を解説します。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介します。
-
20
配列の内容を、指定されたキーで並べ替える方法を解説します。逆順や、複数のキーを指定してソートする方法も紹介します。
-
19
数値データに桁区切り文字を付けるには？（number／currency）
数値データを、ロケール別の桁区切り文字列に整形したり、ロケール別の通貨記号を付加したりして出力する方法を説明します。
-
18
文字列を大文字／小文字に変換するには？（lowercase／uppercase）
lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説します。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介します。
-
17
入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明します。
-
16
別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明します。
-
15
式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
条件式の値に応じてメッセージの表示／非表示を切り替えるために（例えばエラー時にメッセージ表示するなど）、ng-messages／ng-message属性を使用する方法を解説します。
-
14
入力フォームに検証機能を実装するには？（form／input）
標準的な＜input＞要素を拡張して入力フォームに検証機能を付ける方法を説明します。
-
13
URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明します。
-
12
入力された区切り文字を配列に変換するには？（ng-list）
テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説します。
-
11
要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説します。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介します。
-
10
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-if属性を使用する方法を解説します。
-
9
スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説します。
-
8
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説します。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明します。
-
7
ビューにHTML文書をバインドするには？（ng-bind-html）
文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介します。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明します。
-
6
モデルをビューにバインドするには？（ng-bind／ng-cloak）
エクスプレッションが一瞬表示されてしまう不具合を解消して、AngularJSの双方向データバインディングを実現する方法を説明します。
-
5
モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説します。デフォルト値の設定方法も説明します。
-
4
AngularJSに標準搭載されているDIコンテナー機能を使って、依存性を注入するためのさまざまな方法を解説します。
-
3
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明します。
-
2
コード規模が大きくなればモジュール化が必要になります。今回は、AngularJS専用として提供される「モジュール」の基礎を解説します。
-
1
本連載では、AngularJSの基本機能を目的別リファレンスの形式でまとめていきます。 第1回は、AngularJSの利用方法を解説します。