1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
@ngdoc overview
@name Tutorial: Step 6
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_05 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo
}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_07 Next}</td>
</tr>
</table>
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.
1. Reset your workspace to Step 6 using:
git checkout --force step-6
or
./goto_step.sh 6
2. Refresh your browser or check the app out on {@link
http://angular.github.com/angular-phonecat/step-6/app 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 {@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 angular.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
angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating the
angular `{{ exppression }}` 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, and using tools such as
Firebug, or Chrome's Web Inspector, or by 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 step 7 to learn about angular layout
templates and how angular makes it easy to create applications that have multiple views.
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_05 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo
}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_07 Next}</td>
</tr>
</table>
|
