Techブログ

Tech blog

新技術開拓記

Angular.js×cakePHP3.xで非同期通信の実装 その1

カテゴリ:新技術開拓記

2020.06.16

このエントリーをはてなブックマークに追加

こんにちは。inglowの開発担当です。
今回は最近よく耳にするjavascriptのライブラリ「Angular.js」とcakePHP3.xを利用した場合の非同期通信の処理を生成してみます。

今回使った技術は下記です。

  • PHP(cakePHP3.8)
  • javascript(angular.js)

目次

Angular.js×cakePHP3.x

webアプリケーションを作成する際にほぼ利用するものといえば、非同期通信です。
Angular.jsとcakePHP3.xでの非同期通信を調べてみたのですが、jQueryでのajaxとの通信の記事についてはたくさん出てくるのですが、Angular.jsでは意外と出てこず、今回実際に制作してみてまとめることにしました。実際に制作するにあたって出てきた問題は、下記でした。

  1. formタグに指定した、「ng-submit」の処理が動かない
  2. フォームの内容を送信するときに、cakePHP3.8のCSRFトークンチェックでエラーになる

今回の記事では、まず、「formタグに指定した、「ng-submit」の処理が動かない」を解決していきます。

Angular.jsでのsubmit時の処理

Angular.jsでsubmitする際に処理を入れる場合、属性のところに「ng-submit=”関数名()”」を記載し、「action」でURLを指定しないことで、submitされずに処理が動くという仕組みになっていますが、cakePHP3のFormヘルパーでフォームを生成すると、フォームタグの中に現在表示しているURLが入るようになってしまします。
試しに、オプションで「action => null」や「url => null」等を試してみましたが、結局URLがはいるようになってしまいます…。(actionに至っては、「urlのキーで指定してね」とメッセージが表示されます…。)

actionにURLが生成されるのを解決する

今回は、これを解決するために、「action」にnullを指定したらactionにURLを指定しないフォームを生成するヘルパーを作成することにしました。
作成するといっても、元のFormHelperを継承し(継承については、「オブジェクト指向 継承」などで検索するといろいろ解説が出てくるかと思います…)、フォームタグを生成するcreate関数を上書きして作成するような簡単なものです。

独自処理のヘルパーを作る

まずは、元のvendor/cakephp/cakephp/src/View/Helper/FormHelper.phpをコピーして、src/View/Helperの中にコピーします。
FormHelper.phpのファイル名は別のものに変更します。今回は、Angular.jsのために作成するので、「NgFormHelper.php」としました。

次にファイルを編集していきます。
まずは、クラス名と、継承元を変更します。クラス名は、ファイル名に合わせて、「NgFormHelper」、継承元(extends)には、FormHelperと記述します。

次に関数の処理を変えていきます。
create()関数を探しだして(403行目あたりにあるかと思います。)、他の関数は消しておきます。
関数の処理の内容は、実際に見ていただければわかるかと思いますが、最後returnしているところで、「attrs」を指定している箇所で、「$actionAttr」という変数が結合されています。

今回はこれを、actionがfalseだった場合は結合しないように処理を変更しました。

処理が変更できたら、Templete側で呼び出してみます。呼び出す際には$this->「指定したクラス名」->create()で呼び出します。今回の場合は、$this->NgForm->create()です。無事に、actionにURLが指定されていないformが生成されたかと思います。

さいごに

今回は、angular.jsでsubmit時の処理が動かせるようにしました。次は、jqueryでのajaxの実装時にもたくさん困らされた、CSRFチェックの対応方法についてまとめていこうと思います。

一覧へ戻る

記事をカテゴリから探す