Improve this Doc

In this step, we will add thumbnail images for the phones in the phone list, and links that, for now, will go nowhere. In subsequent steps, we will use the links to display additional information about the phones in the catalog.

Data

Note that the phones.json file contains unique IDs and image URLs for each of the phones. The URLs point to the app/img/phones/ directory.


app/phones/phones.json (sample snippet):

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

Component Template


app/phone-list/phone-list.template.html:

...
<ul class="phones">
  <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
    <a href="#/phones/{{phone.id}}" class="thumb">
      <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
    </a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
...

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/{{phone.imageUrl}}), which it would have done if we had only specified an attribute binding in a regular src attribute (<img src="{{phone.imageUrl}}">). Using the ngSrc directive, prevents the browser from making an HTTP request to an invalid location.

Testing


e2e-tests/scenarios.js:

...

it('should render phone specific links', function() {
  var query = element(by.model('$ctrl.query'));
  query.sendKeys('nexus');

  element.all(by.css('.phones li a')).first().click();
  expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
});

...

We added a new E2E test to verify that the application is generating correct links to the phone views, that we will implement in the upcoming steps.

You can now rerun npm run protractor to see the tests run.

Experiments

Summary

Now that you have added phone images and links, go to step 9 to learn about Angular layout templates and how Angular makes it easy to create applications that have multiple views.