AngularJS+PHPでレスポンスを取得する #PHP

こんにちは。

今日は、Webシステムを作る為の事前調査を下記の構成で実施しました。

■目的
AngularJS（HTML,JavaScript）で記載されたリクエストに対して、PHP（サーバサイド）からレスポンスを返却し
HTMLに表示させる。

データはJSON形式を用いる。

■環境
XAMPP

■利用言語
　サーバ
　　PHP(Ver7.x系)
　クライアント
　　HTML5
　　AngularJS(1.6系）

1.環境設定
　XAMPPをインストール
　Apacheのポート切替（利用ポートがSkypeと重複していた為）
　Atom Live Server(HTML動作確認用）のインストール

2.コーディング
・index.html

<html ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>

  <!-- vendor -->
<script src="./js/vendor/angular.js"></script>

<!-- original -->
<script src="./js/controller/index.js"></script>

<title>test</title>
</head>
<body ng-controller="IndexController">
  <!-- page start -->
データ：{{data}}<br>
名前：{{name}}<br>
性別：{{gender}}<br>
趣味：{{shumi}}<br>
特技：{{tokugi}}<br>

</body>
</html>

・index.js

var app = angular.module('myApp',[]);
app.controller('IndexController',['$scope','$rootScope','$http',function($scope,$rootScope,$http){
$rootScope.serverUrl='http://localhost:8081/blg_server/blg_server.php/';
// http post start
  $http.post($rootScope.serverUrl + 'test1'
  // ,{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
  )
  .then(function onSuccess(response){
      var data = angular.fromJson(response);
      console.table(response);
      $scope.data = response;
      $scope.name = data.data.name;
      $scope.gender = data.data.gender;
      $scope.shumi = data.data.detail.shumi;
      $scope.tokugi = data.data.detail.tokugi;
    });
}]);

・サーバのphpファイル

<?php
// CROSS ORIGIN
if (array_key_exists('HTTP_ORIGIN', $_SERVER)) {
    $http_origin = $_SERVER['HTTP_ORIGIN'];
}
else if (array_key_exists('HTTP_REFERER', $_SERVER)) {
    $http_origin = $_SERVER['HTTP_REFERER'];
} else {
    $http_origin = $_SERVER['REMOTE_ADDR'];
}
header("Access-Control-Allow-Origin: $http_origin");

// dispatch start
// params parse
$params = array();
if('' != $_SERVER['REQUEST_URI']){
  $params = explode('/', $_SERVER['REQUEST_URI']);
}
// param get
$controller='index';
if(0<count($params)){
  $controller = $params[3];
}
// dispatch exec
  switch ($controller) {
    case 'index':
      echo 'とっぷ';
      break;

      case 'test1':
      $arr = array(
        'name'=>'太郎',
        'gender'=>'男',
        'detail'=>array(
          'shumi'=>'釣り',
          'tokugi'=>'野球',
        ),
      );
      $json = json_encode($arr
       , JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES
      );
      echo $json;
        break;

      case 'test2':
        echo 'テスト2';

    default:
      echo 'その他だよ';
      break;
  }

 ?>

3.配置
C:\xampp\htdocs\
（phpMyAdminのデフォルトのディレクトリがここらしい）にphpファイルを配置

4.Apacheサーバ起動

5.動作確認
/(phpファイル)/test1を直接叩いた時のレスポンス
■localhost:(設定したポート番号)/(phpファイル)/test1をブラウザで叩く

{ "name": "太郎", "gender": "男", "detail": { "shumi": "釣り", "tokugi": "野球" } }

HTMLファイル上の動作確認
■localhost:(Atom Live Serverで起動したポート番号)/index.html

データ：{"data":{"name":"太郎","gender":"男","detail":{"shumi":"釣り","tokugi":"野球"}},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:8081/blg_server/blg_server.php/test1","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"OK","xhrStatus":"complete"}

名前：太郎

性別：男

趣味：釣り

特技：野球

以上の流れで、AngularJS上からPOST通信でリクエストを送り、とりあえずPHP上からレスポンスを返却することが出来ました。