作成日
最終更新
記事区分
AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
ここにサンプルコードを記載。
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http', function($scope, $http){
// ここにサンプルコードを記載。
}]);
</script>
</body>
</html>
api.html
<p>API result.</p>
HTTP リクエスト
返されるプロミスオブジェクトにコールバック関数を登録します。
GET
HTML
<p>{{ response | json }}</p>
JavaScript
$http.get('api.html')
.success(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
})
.error(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
});
POST
HTML
<p>{{ response | json }}</p>
JavaScript
$http.post('api.html', {key:'value'})
.success(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
})
.error(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
});
リクエスト時のヘッダー情報を設定
リクエストメソッド共通
HTML
<p>{{ response | json }}</p>
JavaScript
// 新規ヘッダーの追加
$http.defaults.headers.common.MyHeader = 'value';
// 既定ヘッダーの削除
delete $http.defaults.headers.common.Accept;
$http.get('api.html')
.success(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
})
.error(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
});
GET/POST/PUT/DELETE 個別
GET/DELETE には既定値がないため新規にオブジェクトを追加します。
$http.defaults.headers.get = {MyHeader:'value'};
$http.defaults.headers.delete = {MyHeader:'value'};
POST/PUT にはオブジェクトが設定されているため以下のように記述できます。
$http.defaults.headers.post.MyHeader = 'value';
$http.defaults.headers.put.MyHeader = 'value';
ランタイムではなく事前に設定
$http ではなく $httpProvider を config 内で設定します。
HTML
<p>{{ response | json }}</p>
JavaScript
var app = angular.module('myApp', []);
app.config(['$httpProvider', function($httpProvider){
$httpProvider.defaults.headers.common.MyHeader = 'value';
}]);
app.controller('myController', ['$scope', '$http', function($scope, $http){
$http.get('api.html')
.success(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
})
.error(function(data, status, headers, config){
$scope.response = [data, status, headers, config];
});
}]);
0
関連記事
- AngularJS 公式ドキュメントの利用例AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
- ルーティングを定義してシンプルな SPA を構築 (AngularJS)AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
- DOM 操作ディレクティブ (AngularJS)AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
- フィルター (AngularJS)AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。 フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
- サービス (AngularJS)AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...
