angularjs 教程7

最新推荐文章于 2025-02-28 14:30:16 发布

转载最新推荐文章于 2025-02-28 14:30:16 发布 · 463 阅读

本文介绍如何在Angular应用中为手机列表添加图片和链接，并使用双花括号绑定动态生成将来指向手机详情页面的链接。同时，通过新增端到端测试确保链接正确生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Workspace Reset Instructions ➤

Git on Mac/Linux
Git on Windows

Reset the workspace to step 6.
```
git checkout -f step-6
```
Refresh your browser or check the app out on Angular's server.

Reset the workspace to step 6.
```
git checkout -f step-6
```
Refresh your browser or check the app out on Angular's server.

You should now see links and images of the phones in the list.

The most important changes are listed below. You can see the full diff on GitHub:

Data

Note that the phones.json file contains unique ids and image urls for each of the phones. The urls point to theapp/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",
    ...
  },
  ...
]

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 that will in the future lead to phone detail pages, we used the now-familiar double-curly brace binding in thehref 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 invalid urlhttp://localhost:8000/app/{{phone.imageUrl}}, which it would have done if we had only specified an attribute binding in a regularsrc attribute (<img class="diagram" src="{{phone.imageUrl}}">). Using thengSrc directive prevents the browser from making an http request to an invalid location.

Test

test/e2e/scenarios.js:

 ...
    it('should render phone specific links', function() {
      input('query').enter('nexus');
      element('.phones li a').click();
      expect(browser().location().url()).toBe('/phones/nexus-s');
    });
...

We added a new end-to-end test to verify that the app is generating correct links to the phone views that we will implement in the upcoming steps.

You can now rerun ./scripts/e2e-test.sh or refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running onAngular's server.

Experiments

Replace the ng-src directive with a plain old src attribute. Using tools such as Firebug, or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed making an extraneous request to/app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}}).

The issue here is that the browser will fire a request for that invalid image address as soon as it hits theimg tag, which is before Angular has a chance to evaluate the expression and inject the valid address.

Summary

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