angular.jsをチュートリアルから学ぶ step6 Templating Links & Images

間が空いてしまいましたがangular.jsのstep6です。
本家のチュートリアルが更新されていて、利用しているバージョンが1.2に更新されていました。

http://docs.angularjs.org/tutorial/step_06

step6ではjsonのデータに記述されているデータでテンプレートを表示します。
チュートリアルでは画像のファイル名をjson内に記述しておいて、
ng-srcで指定した画像ファイル表示を行っています。

使用例

<img ng-src="{{phone.imageUrl}}">

チュートリアルの解説

とりあえずここにサンプルをそのままのせておきました。

jsonファルの中身

相変わらずモトローラのスマートフォンのインフォメーションが多いようです。
jsonの中身はこのような感じで定義されています。

[
  {
    ...
    "id": "motorola-defy-with-motoblur",
    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
    "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
    ...
  },
  ...
]

idはスマートフォンの名前、imageUrlは画像ファイルへのパス、nameはスマートフォンの正式名称でしょうか?
idが数字じゃなかったりnameで同じような名前が繰り返されていたり違和感を感じましたが、
黙って進んでいきます。

htmlファイル内のテンプレート

index.htmlのソースの中ぐらいにリストタグで囲まれた記述があります。
ここが今回注目すべき場所です。

<ul class="phones">
  <!-- ここでjsonから受け取ったデータを繰り返し表示します。 -->
  <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>

imgタグの中にng-srcの記述があると思います。
angularjsではこの要素の中に画像ファイルのパスを入れるとほかの変数と同じようにして、
画像の変更などを行うことができます。

転載したstep6サンプルへのリンク

liタグに filter:query | orderBy:orderProp という記述があります。
filterとorderByについてはStep3について解説していますのでそちらもお読みください。

aタグで記述されたURLは?

aタグ内にhrefにて #/phones/{{phone.id}} という記述があります。
URLは http://hogehoge.com/#phones/motorola-test のようなURLが生成されますが、
Step6では特にリンクをクリックしても何もおきません。
次回からこのURLをもとにしてほかのテンプレートを呼び出すということを行っていきます。