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