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/'])
        }
        // ...