WordPress投稿内でAngularJSを使ってPHPの実行結果を取得して表示

WordPress投稿内でAngularJSを使ってPHPを実行し、取得した値を表示する方法についてです。

ここでは、WordPressサイト全体でAngularJSが利用できる状態であると仮定しています。
AngularJSをテーマのheader.phpでインクルードする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
 
1)簡単なphpコード作成
 
(hello.php)
<?php
print “Hello World!”;
?>
 
2)AngularJSでスクリプト作成
 
AngularJSの$httpサービスを使って上記PHPスクリプトにアクセスし、実行した値”Hello World!”を取得します。
 
$scope.phpDataに上記で取得した値を設定します。
 
(php.js)

var myApp = angular.module('myApp', []);

myApp.controller('phpCtrl', ['$scope', '$http', function ($scope, $http) {
    $http({
      method: 'get',
      url: 'http://www.example.com/wp/wp-content/themes/testtm/js/php/hello.php'
      }).success(function(data) {
        $scope.phpData = data;
    });
}]);

 
3)WordPress投稿本文
 
・上記スクリプトphp.jsをインクルードします。
 
・スクリプトで定義したコントローラの名前”phpCtrl”を記述します。
<div ng-controller=”phpCtrl”>
 
・PHPで実行した値はスクリプト内で$scope.phpDataに保存されているので、この変数を投稿内でバインドして表示します。
{{phpData}}
 

<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/testtm/js/php.js'></script>

<div ng-controller="phpCtrl">
  {{phpData}}
</div>
関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です