AngularJS template links and images

Template connections and images

In this step, you'll add a thumbnail to the phone in your phone list and link to where you want to go. In the next steps, you'll use this link to display additional information about the phone in the catalog.

• Now the phones in the list already have links and images.

Reset the workspace to step 6

git checkout -f step-6

Refresh your browser or check this step online: Step 6 Live Demo

The most important differences between step five and step six are listed below. You can see the full difference in GitHub.

Data

Note that phones.json file contains a unique ID and image URL for each phone. The URL points app/img/phones directory.

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

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

Template

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>
...

To dynamically generate links to your phone's details page in the href binding on the value of the element property href. I n the second step, we've added {{phone.name}} the content of the element. In this step, the {{phone.id}} on element properties.

We also added a mobile phone image after each record, using an image label with an ngSrc instruction. T his instruction prevents the browser {{ expression }} from literally initializing a request to the invalid http://localhost:8000/app/{{phone.imageUrl}} if we bind this double brace value only on a regular element property, src ( src <img src="{{phone.imageUrl}}"> . Use ngSrc to prevent the browser from initiating http requests for an invalid location.

Test

test/e2e/scenarios.js :

...
    it('should render phone specific links', function() {
      var query = element(by.model('query'));
      query.sendKeys('nexus');
      element.all(by.css('.phones li a')).first().click();
      browser.getLocationAbsUrl().then(function(url) {
        expect(url).toBe('/phones/nexus-s');
      });
    });
...

We've added a new end-to-end test to verify that the app has generated the correct link to link to the phone view, and we'll implement that view next.

Now you can npm run protractor to see the test run.

Experiment

• Replace the ng-src instruction with src flat old element property src. Use tools such as Firebug, or Chrome's Web Inspector, or check the web server's access log to make sure that the app has actually made an external request to /app/%7B%7Bphone.imageUrl%7D%7D /app/{{phone.imageUrl}}

  One topic is that when the browser reads the img tag, the browser img has had the opportunity to evaluate the expression and inject a valid address.

Summarize

Now that you've added a phone image and link, go to Step 7 Route and Multi-View to learn about the Angular layout template and how Angular makes it easier to create apps with multiple views.