AngularJSの$httpサービスの概要をまとめ、サーバーからGetリクエストでJSONファイルのデータを取得するサンプルを作成しました。
※目次をクリックすると目次の下部にコンテンツが表示されます。
angular.module('MyApp', []) .controller('MainCtrl', function($scope,$http) { var svrURL = "../../wp-content/themes/wp/friends.json"; var config = {}; $http.get(svrURL, config) .then(function onSuccess(response) { : }, function onError(response) { : }); });
1)引数に依存するサービスを指定
コントローラのファクトリ関数の引数に$httpを指定します。
2)$httpサービスの構文
①簡易的な構文
データを送信するPOST、PUT、PATCHのHTTPメソッドは、urlとconfig、送信データを引数に指定し、それ以外のHTTPメソッドは、urlとconfigのみ引数に指定します。
post(url, data, [config]);
put(url, data, [config]);
patch(url, data, [config]);
get(url, [config]);
delete(url, [config]);
head(url, [config]);
jsonp(url, [config]);
②完全版の構文
configオブジェクトのみ引数に指定します。メソッド名と簡易版で指定した引数url、dataはconfigオブジェクト内に指定します。
$http(config)
③configオブジェクトのメンバ
○method
○url
○params
・URLクエリパラメータ。キーと値のペアのJavaScriptオブジェクト。
・paramsで{key1: ‘value1’, key2: ‘value2’}下記のように指定すると”?key1=value1&key2=value2″のようにURLクエリパラメータとしてURLに追加されてリクエストされる。
キーと値のペアの値が文字列ではなくオブジェクトを指定した場合はJSON形式に変換される。
○data
・POSTメソッドなどで送信されるデータ。文字列またはオブジェクト。
○headers
・{‘Content-Type’: ‘text/csv’}のようにHTTPヘッダーをオブジェクトを使って指定。
○xsrfHeaderName
・XSRF攻撃を防ぐための設定をしているサーバー用にXSRFヘッダーをセット。
○xsrfCookieName
・XSRF対策用のクッキーの名前
○transformRequest、transformResponse
・送受信するデータとHTTPヘッダーを引数とする関数を定義し、送受信データを変換する事が出来る。
○cache
・アプリケーションレベルでキャッシュを行うか指定。真偽値またはキャッシュオブジェクトを指定。
・trueを指定した場合は、デフォルトのキャッシュが使用される。
・$cacheFactoryを使ってカスタムのキャッシュオブジェクトを使用する事が出来る。
○timeout
・リクエストが処理されるまでの待機時間(ミリ秒)を指定、またはpromiseオブジェクトを指定して、サーバーリクエストの取消しを制御できる。
3)$httpサービスのリターン
$httpサービスはプロミスオブジェクトをリターンし、サーバーから応答がリターンされると応答結果に応じて実行するハンドラー関数を定義する事が出来る。
※プロミスオブジェクトについてはこちらも参照。
・プロミスオブジェクトを使用する事によってノンブロッキングでイベントドリブンにでき、サーバーからのレスポンスを待っている間もブラウザの操作が出来る。
①$httpサービスのプロミスオブジェクトで定義されているメソッド
・then(fn1,fn2)のメソッドが定義されていて、引数に応答後に実行するハンドラー関数を指定する。
・応答結果が成功(レスポンスコードが200)の場合は、fn1メソッド、応答結果が失敗(レスポンスコードが200以外)の場合は、fn1メソッドが実行される。
②then(fn1,fn2)メソッドのハンドラー関数に渡される属性
○headers
・レスポンスのHTTPヘッダー
○status
・レスポンスのステータスコード
○config
・リクエスト時に指定したconfigオブジェクト
○data
・サーバーからのレスポンスのボディ
③プロミスオブジェクトについて
・thenメソッドはプロミスオブジェクトをリターンし、複数の呼出しをチェーンできる。
・それぞれのハンドラー関数は値をリターンする事が出来、プロミスチェーンの次の関数に渡す事が出来る。
・ハンドラー関数がプロミスをリターンするとそのリクエストが終了後にその次のハンドラーが呼び出される。
・プロミスをチェーンする例
$http.get('/api/config').then(function(config) { return $http.get('/api/' + config.data.USER); }).then(function(userResponse) { return $http.get('/api/' + userResponse.data.id + '/items'); }).then(function(itemResponse) { // }, function(error) { //
・$httpサービスの使用法を確認するために、リクエスト時に指定したconfigオブジェクトの内容(このサンプルでは明示的に設定していないのでデフォルト値が表示)とレスポンスのステータス、HTTPヘッダーも表示しています。
デモとコードサンプルはこちら。
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- 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データをバインドして表示
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- 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データをバインドして表示