ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近は機械学習をさわりはじめたお(^ω^ = ^ω^)

Angular2を触り始めたがこいつがフレームワークってことを忘れていました

スポンサードリンク

意味深なタイトルっぽいけど、今日の反省です。技術的な話はしないのでそのつもりで来た人はブラウザバック。

CakePHP3をサーバサイドで、フロントをAngular2で開発しようとしました。

CakePHP3側はJson APIとして使っていましたが、部分的にCakePHP側でもviewを用意していました。

例えばPostsControllerがあるとして、addとeditのページ(アクション)を用意しました。

<?php

class PostsController extends AppController {

    public function add() {
    }

    public function edit() {
    }
}

ただ、addとeditのformの中には動的なfieldがあり、そこをAngular2でやろうとしたのです。

これが間違いだった。

さぁ、いざ組んでみますと、Angular2のコードがモリモリ増えていきます。(やってみたらわかります)

ついには、CakePHP側のViewがすべてAngular2になりました。

用意したaddやeditはただ、jsを読む込ませるためのtemplate表示になりました。そのあとはフロント側のAngular2がデータをリクエストしてtemplateを元にviewを組み立てていく。ま、いいんじゃね?と思い開発を進めました。

が、困ったのはそのあと。

addページで保存したあと、次のアクションをどうしようか迷ったときです。

普通は、その場で編集しますか?と促したり、indexページへリダイレクトしたりするはずです。

私もそこで、そういうwindow.confirmを用意して、ユーザーに判断させるコードを実装しました。

        // ...
        if (window.confirm('データを保存しました。編集を続けますか?')) {
          this.postCrudService.saveData(response);
          this.router.navigate(['/posts/edit/' + response.data.id])
        } else {
          this.router.navigate(['/posts/'])
        }
        // ...

this.routerはAngular2のモジュールである、Routerモジュールです。こいつを使うことで、ページの移動などを実装することができます。this.postCrudServiceはDIしている自作のサービスクラスです。こいつで保存したデータを使いまわすようにしています。

私は、addで保存したら、編集ページに移動しようとしました。が、Angular2は思ったとおりに動作しませんでした。

私は、リロードすると思いましたが、しませんでした。そういえばsingle page applicationってことを忘れていました。

これは大変です。私は部分的にAngular2を使おうとしていましたが、CakePHP3でやろうとしていたことがAngular2でもできるようになっているのです。マジのマジでCakePHP3はJsonAPIになってしまった。

あらー、1日中連携しようともくもく頑張っていたのに、これじゃPostController->index()のtemplateもAngular2にしないとダメってことだな。あららのら。

確かに読む込むだけのaddやeditがあるってなんかキモいもんな。今回の場合だと

  • index - ページ読み込み用
  • add - jsonで新規保存
  • edit - jsonで編集保存
  • delete - jsonで削除

っていうAPIを用意して、全部Angular2に任せればよかったのか。

この休日ずっとAnguarl2(ng-book2)を勉強すればよかった。知らずにそのまま開発してしまった。

あー失敗した。やばい。やばい。やばいぃーー!!!