2013年6月18日火曜日

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、テンプレート、コントローラを設定する。
  • 差し込み部分の各テンプレートを用意する。 といった感じです。

CakePHPでの設定

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公式のチュートリアルと内容同じはずです。

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

環境とか

項目 内容
PHPフレームワーク Cakephp 2.2.5
CSSフレームワーク Twitter bootstrap 2.2.2
JSフレームワーク AngularJS 1.0.5
IDE SublimeText 2
開発環境? MAMP
PC iMac
OS Mac OS Lion