Angular - Templating Images and Links

The whole exercise in this is to display a list of phone thumbnails for the phones. This is done by the following snippet. 

ul class=“phones”

li ng-repeat=“phone in phones | filter:query | orderly:orderProp“ class = thumbnail 

a href = “#phones/{{phone.id}}” class=“thumb” img ng-src=“{{phone.phone-url}}” alt=“{{phone.name}}”

a href = “#phones/{{phone.id}}” > {{phone.name}}

p {{phone.snippet}} 

To dynamically generate links that will in the future lead to phone detail pages, we used the now-familiar double-curly brace binding in the href attribute values. In step 2, we added the {{phone.name}} binding as the element content. In this step the {{phone.id}} binding is used in the element attribute.

We also added phone images next to each record using an image tag with the ngSrc directive. That directive prevents the browser from treating the Angular {{ expression }} markup literally, and initiating a request to an invalid URL http://localhost:8000/app/{{phone.imageUrl}}, which it would have done if we had only specified an attribute binding in a regular src attribute (). Using the ngSrc directive prevents the browser from making an http request to an invalid location.

references:

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