AngularJS Routing 〜画面遷移ができた、そして〜

今回は、「$http」オブジェクトを使用してphpへの非同期リクエストを送信したいと思います。
ちなみに、前回はngRouteを指定して画面遷移に関して記載しいました。

作成中のページはこちらです。(AngularJS + BootStrap)

httpを使う

参考サイトによると、大雑把に下のようなコードでリクエストをサーバー側に送るようです。

  $http({
    method: 'GET',
    url: 'phpへのURL',
    params: { name: $scope.name }
  })
  // 2成功時の処理(ページにあいさつメッセージを反映)
  .success(function(data, status, headers, config){
    $scope.result = data;
  })
  // 3失敗時の処理(ページにエラーメッセージを反映)
  .error(function(data, status, headers, config){
    $scope.result = '通信失敗!';
  }

なので、非同期通信用(リクエストに対してJSONを返却するPHP)を作成する必要があります。
今回は、サイトマップの画面を作成しようと思いますので、WPのカテゴリ一覧を JSONで返却する処理を作成したいと思います。

PHP処理を作成する

こちらのサイトによると下のようなコードで行けるようです。

<?php
  $category = get_the_category();
  $cat_id   = $category[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  $cat_slug = $category[0]->category_nicename;
?>

シンプルに引数なしの一覧を返すようです。
しかしこれに、URLも欲しいのでもう1つ処理を呼び出します。PHPドキュメント参照

<?php
    // 指定したカテゴリーの ID を取得
    $category_id = get_cat_ID( 'カテゴリー名' );

    // このカテゴリーの URL を取得
    $category_link = get_category_link( $category_id );
?>

<!-- このカテゴリーへのリンクを出力 -->
<a href="<?php echo esc_url( $category_link ); ?>" title="カテゴリー名">カテゴリー名</a>

そして、複数のカテゴリ一覧を取得するにはget_categoriesを使用するみたいです。
まとめると下のようなコードで良いことになります。

$categies = get_categories();
  $cat_id   = $categies[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  // このカテゴリーの URL を取得
  $category_link = get_category_link( $cat_id );
  // JSON文字列を出力
  echo json_encode($category_link);
  

しかし、カテゴリ一覧なので、ループ処理を入れてやる必要があります。
PHPのループ処理を入れてやればうまく動きそうです。
実装の部分は後日にします。

でわでわ。。。