AngularJSチュートリアルやってメモメモ（step6 - リンクや画像のテンプレート化）
かなり間があいてしまったが再開。。
今回やるのはこちら↓
AngularJS: 6 - Templating Links & Images
このstepでは端末リストにサムネイルを表示し、リンクを貼る。※リンクはまだどこにもジャンプしない。リンクを押された後の処理は後のstepで実装する。
ワークスペースをstep6のにリセット。注：ローカルの修正は破棄される
git checkout -f step-6
ローカルサーバーをリフレッシュ（またはAngularサーバーで確認可）。
端末リストにサムネイル画像とリンクが設定されているのが確認できるはず。
step5からstep6への変更を説明。diffはこちら。
データ
phone.jsonファイルにはそれぞれの端末に対してユニークIDと画像URLが記述されている。URLはapp/img/phonesディレクトリを指している。
app/phones/phones.json（抜粋）:
[ { ... "id": "motorola-defy-with-motoblur", "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", ... }, ... ]
テンプレート
app/index.html:
...
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
...
リンク（後のstepで詳細ページに遷移する）を動的に生成するのに、お馴染みのダブル波括弧を使用してhref属性をバインドしている。step2では要素の内容に{{phone.name}}を記述していたが、ここでは要素の属性に対して記述している。
ここではまた、ngSrcディレクティブ（ng-src属性）を持つimgタグを用いて端末画像を表示している。angularJsはブラウザによってDOMの要素が読み込まれた後にバインディング等の処理を行うが、imgタグのsrc属性に{{phone.imageUrl}}と直接記述してしまうとAngularJSに処理が渡る前にブラウザが「http://localhost:8000/app/{{phone.imageUrl}}」という不正なURLにリクエストを送信してしまう。ngSrcディレクティブを用いることでそれを防ぐことが出来る。
テスト
test/e2e/scenarios.js:
...
it('should render phone specific links', function() {
input('query').enter('nexus');
element('.phones li a').click();
expect(browser().location().url()).toBe('/phones/nexus-s');
});
...
端末リストに正しいリンクが設定されているかを検証する新しいend-to-endテストが追加されている。
./scripts/e2e-test.shで再実行できる。ブラウザで実行している場合はリフレッシュで再実行可能。
またはAngularサーバーでも確認できる。
実験
- ng-srcディレクティブを通常の属性に変更してみよう。そしてFirebugやChrome Web Inspectorの様なツールを使ってブラウザが不正なURL、/app/%7B%7Bphone.imageUrl%7D%7D (または /app/{{phone.imageUrl}})にリクエストを送信していることを確認してみよう。
今日はここまで。次回は「step7 - ルーティング＆マルチビュー」
