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

二日目のgithubコード

githubから必要な方はダウンロードして下さい。

Step3 繰り返し内からの抽出

Step3のサンプルページ
抽出機能を追加します。stepo3.ctpを以下のように変更。

    <?php
    $this->set('title_for_layout',Configure::read('Toutorial03.title'));

    // bodyの属性にng-appを設定する。
    $this->start('body_attr');
    echo 'ng-app';
    $this->end();

    // sidebarにinnput要素を追加
    $this->start('sidebar');
    ?>
    Search: <input ng-model="query">
    <?php
    $this->end();

    // AngularJS用の設定、コード。
    $this->start('script');
    // スクリプトを読み込む。
    echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js') . "\n";
    echo $this->Html->script('step3/controllers.js') . "\n";
    $this->end();
    ?>
    <div>
        <div ng-controller="PhoneListCtrl">
            <h4>ビューとテンプレート</h4>
            <ul>
                <li ng-repeat="phone in phones | filter:query">
                    {{phone.name}}
                    <p>{{phone.snippet}}</p>
                </li>
            </ul>

            <h4>以下実験</h4>
            <p>  <div id="status">現在のフィルター: {{query}}</div></p>
        </div>
    </div>

1. AngularJS
   • ng-controller(controllers.js)は変更なし
   • html側に標準のinputタグを追加。innputにはng-modelでqueryを設定。
   • ng-repeatにfilter:queryを追加。これでqueryの内容で抽出する。
   • 特に指定無い場合はphone.name,phone.snippetの両方で抽出する。
2. Cakephp
   • レイアウト側にbodyタグがあるので$this->start('body_attr');でレイアウトbody属性に設定
   • レイアウト側でsidebarを分けているので$this->start('sidebar');でサイドバーの設定

Step4 双方向型のデータ連結

Step4のサンプルページ
ソートの機能を追加します。
step4.ctpの修正。
サイドバー部分に以下を追加。

    Sort by:
    <select ng-model="orderProp">
        <option value="" selected>unknown</option>
        <option value="name">アルファベット順</option>
        <option value="age">新作順</option>
    </select>

ng-repeatの値に

    | orderBy:orderProp

を追加

controllers.jsの修正。各データにageを追加。

これだけでセレクトタグからソート順を選択できる。楽ちんすぎて心が痛いです。

今日はこんな所で終わりです。ではでは。

環境とか

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