AngularJSのチュートリアルをCakePHPでやってみる。その１

AngularJSのチュートリアルをやって行きたいと思います。

AngularJSをいじるのに限界がきたので、公式のチュートリアルをやって理解を深めようと決心しました。
せっかくなので覚えたてのgithubでコードを公開しようと思います。本日分はこちら
サンプルサイトも公開します。
なお、busyoumonoは英語読めないので感覚で書いてます。なんか違う！って時はご教授お願いします。

CakePHP側の準備

普通にCakePHPをダウンロードして解凍してってヤツです。説明しているサイトは他にもあるので割愛します。githubでコード見てもらえばわかると思います。

Step0 準備と基本

AngularJSファイルの読み込み

サンプルサイト Step0
Setp00.ctpで

$this->start('script');
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js') . "\n";
$this->end();

のように書いてAngularJSを読み込みます。

ng-app

属性にng-appをつけると、その要素内でAngularJSを使う宣言になる模様。

2個の波括弧

波括弧で囲むと簡単な式を実行して表示するようになる。

まだここには、何も{{'ありません' + '!'}}

Step1 静的なテンプレート

静的なテンプレートを試す

サンプルサイト Step1
Setp01.ctpで

<ul>
    <li>
        <span>Nexus S</span>
        <p>
            Fast just got faster with Nexus S.
        </p>
    </li>
    <li>
        <span>Motorola XOOM™ with Wi-Fi</span>
        <p>
            The Next, Next Generation tablet.
        </p>
    </li>
</ul>
<p>Total number of phones: 2</p>

と書き直し。リストが表示されたらOK。ここはそれだけ。

Step2 AngularJSのテンプレート

サンプルサイト Step2

• AngularJSは Model-View-Controller (MVC) 設計パターンを利用している。
• AngularJSはHTMLをテンプレートとして使う模様。
• HTMLの中に波括弧2つで囲み、モデルを表示する。
• PHPのフレームワークと違って Model-View の結び付きが強い模様。ViewがModelを手放さないって感じ。

ng-controllerの設定

Step02.ctpで

<div ng-controller="PhoneListCtrl">

と書いてコントローラを指定している。
コントローラは webroot/js/step2/controllers.js ファイルを作って

function PhoneListCtrl($scope) \{
    $scope.phones = [
        {"name": "Nexus S",
         "snippet": "Fast just got faster with Nexus S."},
        {"name": "Motorola XOOM™ with Wi-Fi",
         "snippet": "The Next, Next Generation tablet."},
        {"name": "MOTOROLA XOOM™",
         "snippet": "The Next, Next Generation tablet."}
    ];
\}

で保存する。

• ビュー側で使うコントローラを指定する。
• js側でコントローラを作成する。
• コントローラの引数 $scope はAngularJSで使われる大事な変数みたい。
• 今回のコントローラは「phones」というモデル（データ）を設定してるだけ。

ng-repeat

この属性を指定した要素を繰り返す。
Step02.ctp

<ul>
    <li ng-repeat="phone in phones">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
    </li>
</ul>

• コントローラに設定されたphonesのモデルをループ処理している。
• liタグを繰り返す。
• phone.nameやphone.snippetで各データを表示できる。

Step2までは以上です。

環境とか

項目	内容
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