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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
@ngdoc overview
@name Tutorial: Step 8
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/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-7...step-8 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_09 Next}</td>
</tr>
</table>
In this step, you will implement the phone details view, which is displayed when a user clicks on
a phone in the phone list.
1. Reset your workspace to Step 8 using:
git checkout --force step-8
or
./goto_step.sh 8
2. Refresh your browser or check the app out on {@link
http://angular.github.com/angular-phonecat/step-8/app angular's server}. Now when you click on a
phone on the list, the phone details page with phone-specific information is displayed.
To implement the phone details view we will use {@link angular.services.$xhr $xhr} to fetch our
data, and we'll flesh out the `phone-details.html` view template.
The most important changes are listed below. You can see the full diff on {@link
https://github.com/angular/angular-phonecat/compare/step-7...step-8
GitHub}:
## Data
In addition to `phones.json`, the `app/phones/` directory also contains one json file for each
phone:
__`app/phones/nexus-s.json`:__ (sample snippet)
<pre>
{
"additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)",
"android": {
"os": "Android 2.3",
"ui": "Android"
},
...
"images": [
"img/phones/nexus-s.0.jpg",
"img/phones/nexus-s.1.jpg",
"img/phones/nexus-s.2.jpg",
"img/phones/nexus-s.3.jpg"
],
"storage": {
"flash": "16384MB",
"ram": "512MB"
}
}
</pre>
Each of these files describes various properties of the phone using the same data structure. We'll
show this data in the phone detail view.
## Controller
We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
the same way as the phone list controller.
__`app/js/controller.js`:__
<pre>
function PhoneDetailCtrl($xhr) {
var self = this;
$xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
self.phone = response;
});
}
//PhoneDetailCtrl.$inject = ['$xhr'];
</pre>
To construct the URL for the HTTP request, we use `params.phoneId` extracted from the current
route in the `PhoneCatCtrl` controller.
## Template
The TBD placeholder line has been replaced with lists and bindings that comprise the phone
details. Note where we use the angular `{{expression}}` markup and `ng:repeater`s to project phone
data from our model into the view.
__`app/partials/phone-details.html`:__
<pre>
<img ng:src="{{phone.images[0]}}" class="phone"/>
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul class="phone-thumbs">
<li ng:repeat="img in phone.images">
<img ng:src="{{img}}"/>
</li>
</ul>
<ul class="specs">
<li>
<span>Availability and Networks</span>
<dl>
<dt>Availability</dt>
<dd ng:repeat="availability in phone.availability">{{availability}}</dd>
</dl>
</li>
...
</li>
<span>Additional Features</span>
<dd>{{phone.additionalFeatures}}</dd>
</li>
</ul>
</pre>
## Test
We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
step 5.
__`test/unit/controllerSpec.js`:__
<pre>
...
it('should fetch phone detail', function(){
scope.params = {phoneId:'xyz'};
$browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
ctrl = scope.$new(PhoneDetailCtrl);
expect(ctrl.phone).toBeUndefined();
$browser.xhr.flush();
expect(ctrl.phone).toEqual({name:'phone xyz'});
});
...
</pre>
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
output.
Chrome: Runner reset.
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that
the heading on the page is "Nexus S".
__`test/e2e/scenarios.js`:__
<pre>
...
describe('Phone detail view', function() {
beforeEach(function() {
browser().navigateTo('../../app/index.html#/phones/nexus-s');
});
it('should display nexus-s page', function() {
expect(binding('phone.name')).toBe('Nexus S');
});
});
...
</pre>
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-8/test/e2e/runner.html
angular's server}.
# Experiments
* Stretching:
* Alternate chin-to-chest with look-at-ceiling. Repeat eight times.
* Now do ear-to-shoulder (left ear to left shoulder, right to right. Caution: do not try left
ear to right shoulder!). Repeat eight times.
* Finally, do chin-to-shoulder, left right left right. Repeat eight times.
# Summary
Now that the phone details view is in place, proceed to step 9 to learn how to write your own
custom display filter.
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/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-7...step-8 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_09 Next}</td>
</tr>
</table>
|
