不肖者の人生実験: AngularJSのチュートリアルをCakePHPでやってみる。その5

4日目のソースが欲しい方はこちらです。
サンプルページはこちらです。

ここではAngularJSで複数のビュー(テンプレート)を切り替える為の設定方法を新しくやるようです。今までの方法はあくまで簡易的な方法で,実際は今回のやり方を推奨しているようです。

ページを開いた時は今まで通り、スマホの一覧が表示されます。リンクをクリックするとその詳細を開くといった画面を作ります。

app.js：モジュールを指定する。その中で$routeProviderにURL、テンプレート、コントローラを指定する事で使えるようになるみたいです。
controllers.js：これは今まで通りコントローラに、新たに'PhoneDetailCtrl'を追加します。
index.html：表示の大枠のテンプレート。この中の一部が下2つのテンプレートに置き換えるようです。レイアウトテンプレートと呼んでいるようです。この辺はCakePHPと同じです。
phone-list.html：一覧表示用のテンプレート
phone-detail.html：詳細表示用のテンプレート。今回は中身はほぼ空です。

index.htmlにng-app="phonecat"、app.jsにangular.module('phonecat', []). ・・・と対応させる。
index.htmlで「angular.js」「app.js」「controllers.js」を読み込む。
index.htmlで他のテンプレートを差し込む部分に<div ng-view></div>を設定する。
app.jsで$routeProviderをURL、テンプレート、コントローラを設定する。
差し込み部分の各テンプレートを用意する。といった感じです。

AngularJSをCakePHPで動作させる場合はルートプロバイダの設定を

when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl})

では無く、

when('/phones', {templateUrl: 'http://hogepage.com/angularjs/js/partials/phone-list.html',   controller: PhoneListCtrl})

のようにテンプレートをフルパスで設定し、テンプレートファイル’phone-list.html’をCakePHPの「app/webroot/js/partials」に入れれば良いようです。
どなたか、相対パスでも出来る方法知ってる方いらしたらご教授お願いします。

後はAngularJS公式のチュートリアルと内容同じはずです。

今回はこの辺で、ではでは。

不肖者の人生実験