HTTP 通信 (AngularJS)
[履歴] [最終更新] (2015/07/26 23:41:27)
最近の投稿
注目の記事

概要

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];
       });
}]);
関連ページ