mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
53b2254ea7
also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
107 lines
3.4 KiB
Text
107 lines
3.4 KiB
Text
@ngdoc overview
|
|
@name Tutorial: 6 - Templating Links & Images
|
|
@description
|
|
|
|
<h2 style="color: red">This page has not been updated for AngularJS 1.0 yet</h2>
|
|
|
|
<ul doc:tutorial-nav="6"></ul>
|
|
|
|
|
|
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.
|
|
|
|
|
|
<doc:tutorial-instructions step="6"></doc:tutorial-instructions>
|
|
|
|
|
|
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 {@link
|
|
https://github.com/angular/angular-phonecat/compare/step-5...step-6
|
|
GitHub}:
|
|
|
|
|
|
## 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):
|
|
<pre>
|
|
[
|
|
{
|
|
...
|
|
"id": "motorola-defy-with-motoblur",
|
|
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
|
|
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
|
|
...
|
|
},
|
|
...
|
|
]
|
|
</pre>
|
|
|
|
|
|
## Template
|
|
|
|
__`app/index.html`:__
|
|
<pre>
|
|
...
|
|
<ul class="phones">
|
|
<li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
|
|
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
|
|
<a href="#/phones/{{phone.id}}" class="thumb"><img ng:src="{{phone.imageUrl}}"></a>
|
|
<p>{{phone.snippet}}</p>
|
|
</li>
|
|
</ul>
|
|
...
|
|
</pre>
|
|
|
|
To dynamically generate links that will in the future lead to phone detail pages, we used the
|
|
now-familiar {@link guide/dev_guide.compiler.markup double-curly brace markup} 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 {@link
|
|
api/angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating
|
|
the angular `{{ expression }}` markup literally, which it would have done if we had only specified
|
|
an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). Using
|
|
`ng:src` prevents the browser from making an http request to an invalid location.
|
|
|
|
|
|
## Test
|
|
|
|
__`test/e2e/scenarios.js`__:
|
|
<pre>
|
|
...
|
|
it('should render phone specific links', function() {
|
|
input('query').enter('nexus');
|
|
element('.phones li a').click();
|
|
expect(browser().location().hash()).toBe('/phones/nexus-s');
|
|
});
|
|
...
|
|
</pre>
|
|
|
|
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 refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
|
can see them running on {@link
|
|
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
|
|
angular'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/index.html/{{phone.imageUrl}}`).
|
|
|
|
|
|
# Summary
|
|
|
|
Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular
|
|
layout templates and how angular makes it easy to create applications that have multiple views.
|
|
|
|
|
|
<ul doc:tutorial-nav="6"></ul>
|