モーダルを閉じる工作HardwareHub ロゴ画像

工作HardwareHubは、ロボット工作や電子工作に関する情報やモノが行き交うコミュニティサイトです。さらに詳しく

利用規約プライバシーポリシー に同意したうえでログインしてください。

工作HardwareHub ロゴ画像 (Laptop端末利用時)
工作HardwareHub ロゴ画像 (Mobile端末利用時)

HTTP 通信 (AngularJS)

モーダルを閉じる

ステッカーを選択してください

モーダルを閉じる

お支払い内容をご確認ください

購入商品
」ステッカーの表示権
メッセージ
料金
(税込)
決済方法
GooglePayマーク
決済プラットフォーム
確認事項

利用規約をご確認のうえお支払いください

※カード情報はGoogleアカウント内に保存されます。本サイトやStripeには保存されません

※記事の執筆者は購入者のユーザー名を知ることができます

※購入後のキャンセルはできません

作成日作成日
2015/07/26
最終更新最終更新
2017/11/30
記事区分記事区分
一般公開

目次

    学生(?)エンジニア

    0
    ステッカーを贈るとは?

    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
    詳細設定を開く/閉じる
    アカウント プロフィール画像 (本文下)

    学生(?)エンジニア

    記事の執筆者にステッカーを贈る

    有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。

    さらに詳しく →
    ステッカーを贈る コンセプト画像

    Feedbacks

    Feedbacks コンセプト画像

      ログインするとコメントを投稿できます。

      関連記事

      • AngularJS 公式ドキュメントの利用例
        AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
      • ルーティングを定義してシンプルな SPA を構築 (AngularJS)
        AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
        カラフカラフ11/27/2017に更新
        いいねアイコン画像0
      • 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">...