AngularJSのTutorialのstep-6を実施したレポート
正直なところ、最初のうちはなぜこのTutorialがあるのかわからなかった。
ngSrcのAPIの説明を読んでようやく分かったが、ngSrcを使わずにｓｒｃ属性に直接ハッシュを使った記述を試みるとブラウザに誤認識される。Inspectorを使って、接続履歴を見るとわかるが、コンパイルされる前のURLにアクセスを試みて404になっている。
こういうところは、JavaScriptなのでブラウザで一度読み込まれないと動作できないところの悲しいところですね。
サーバ側であれば、何考えずにｓｒｃ={{hash}}と書けるのに。
テンプレート
今回の注目点は下記のタグの書き方。
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
使い方によっては、プロフィール画像の画像がなかった時のシステムデフォルト画像の切り替えに使えたりできる？
we used the now-familiar double-curly brace binding in the href attribute values.
上記の訳し方がわかららず。href属性に関しては、何を利用したことを言っているのかわかっていない
テスト
e2eテストは、ブラウザの遷移先を確認している。
it('should render phone specific links', function() {
input('query').enter('nexus');
element('.phones li a').click();
expect(browser().location().url()).toBe('/phones/nexus-s');
});
- inputで、nexusと検索して、データを絞り込み
- elementで一番上？の画像を取得して、クリックイベントを呼び出す
- expectで、遷移後のURLをチェックしている。
下記の記事で、こちらの仕組みに関わるセキュリティ面の記事が投稿されているため、貼り付けます。