AngularJS + PHP 〜AngularJSの実装〜

前回はWordPressとAngularJSを連携してサイトマップの作成をする計画(設計プラン)を作りましたので、今回はクライアント部分、AngularJSでの実装及び、サーバーサイドへのアクセス方法に関して記載したいと思います。

AngularJSの実装

実装したい要件は以下の通りです。

  1. 初期表示時に、サイトマップの画面を表示する(他の画面も表示できるように作成)
  2. ヘッダー部分に横スクロールメニュー(サイトマップ用)を表示する(WordPress連携部分)
  3. カテゴリ選択した時に対象カテゴリの記事一覧(タイトルと説明(できれば)と画面表示するURL)を表示する

上のような要件を満たすように実装したいと思います。

大まかなフレームワーク

「フレームワーク」と言ってもAngularJSなどのようなフレームワークではなく、「処理の概要」という意味での処理フローです。
具体的には。。。

初期表示

土台にするHTMLファイルにAngularJSの機能を埋め込みます。(土台にするHTMLはBootStrapのテーマです。)

ファイル構成はGithubにアップしてあるのでそちらを参照ください。
まずは「index.html」です。
このHTMLファイルを下のように(一部)編集してやります。

<body ng-app= "pgBoxAG" class="bg-light"  ng-controller="pgboxCtrl">

こうすることでAngularJSの下のコード部分が、モジュールとして機能するようにバインド(関連付け)されます。

/project/config.js

let app = angular.module('pgBoxAG', ['ngRoute']);

このコードは「pgBoxAG」トイウモジュールを作成します。という意味です。index.htmlには下のように、自作するJSファイルの中では下の順番で読まれるように実装しています。

    <!-- PGボックス(上から順に読み込む) -->
    <script src="./project/dataConst.js"></script>
    <script src="./project/config.js"></script>
    <script src="./project/services/service-config.js"></script>
    <script src="./project/pgbox.js"></script>
    <script src="./project/siteMapCtrl.js"></script>
< JSファイルの概要>

A.dataConst.jsには定数などの定義がしてあります。
B.config.jsには各モジュール(コントローラーとファクトリ)
C.pgbox.jsにはルートコントローラー
D.siteMapCtrl.jsにはサイトマップ用の各処理(サイトマップコントローラー)を実装しています。

WordPress連携

今夏のWordPress連携部分はヘッダー部分の横スクロールメニューの項目表示です。
大まかな処理としては下のように実装しています。

  1. pgbox.jsにあるコントローラーでSiteMapService(/project/service/(/project/service/serviceーconfig.js)を呼び出し、WordPressにある、カテゴリ一覧を取得する
  2. SitemapServiceからPHPファイルへリクエストを飛ばし返却値'(JSON)を取得して値を返却する
  3. PHPファイル(getCategories.php)でWordPressの部品を使用するための「おまじない」を使用してWordPressテンプレート(関数)を使用できるようにする。→require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' );
  4. カテゴリ一覧を取得、JSONに変換してクライアント側に値を返却

というような処理を実装しました。

現段階(2020-01-05)では、横スクロールメニューからのカテゴリ毎の記事一覧が表示できない状態です(BootStrapテーマファイルがそのまま残っています。)

とりあえずは、こんな状態です。まだまだ実装は続きます。

でわでわ。。。