Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 4b67b04

Browse files
petebacondarwingkalpak
petebacondarwin
authored and
gkalpak
committed
step-10 More Templating
- Implement fetching data for the selected phone and rendering to the view: - Use `$http` in `PhoneDetailController` to fetch the phone details from a JSON file. - Create the template for the detail view. - Add CSS styles to make the phone detail page look "pretty-ish".
1 parent 53d9314 commit 4b67b04

File tree

5 files changed

+211
-7
lines changed

5 files changed

+211
-7
lines changed

‎app/app.css

+58-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
body {
2-
padding-top: 20px;
2+
padding: 20px;
33
}
44

5+
h1 {
6+
border-bottom: 1px solid gray;
7+
}
8+
9+
/* View: Phone list */
510
.phones {
611
list-style: none;
712
}
@@ -19,3 +24,55 @@ body {
1924
padding-bottom: 1em;
2025
width: 100px;
2126
}
27+
28+
/* View: Phone detail */
29+
.phone {
30+
background-color: white;
31+
border: 1px solid black;
32+
float: left;
33+
height: 400px;
34+
margin-bottom: 2em;
35+
margin-right: 3em;
36+
padding: 2em;
37+
width: 400px;
38+
}
39+
40+
.phone-thumbs {
41+
list-style: none;
42+
margin: 0;
43+
}
44+
45+
.phone-thumbs img {
46+
height: 100px;
47+
padding: 1em;
48+
width: 100px;
49+
}
50+
51+
.phone-thumbs li {
52+
background-color: white;
53+
border: 1px solid black;
54+
display: inline-block;
55+
margin: 1em;
56+
}
57+
58+
.specs {
59+
clear: both;
60+
list-style: none;
61+
margin: 0;
62+
padding: 0;
63+
}
64+
65+
.specs dt {
66+
font-weight: bold;
67+
}
68+
69+
.specs > li {
70+
display: inline-block;
71+
vertical-align: top;
72+
width: 200px;
73+
}
74+
75+
.specs > li > span {
76+
font-size: 1.2em;
77+
font-weight: bold;
78+
}

‎app/phone-detail/phone-detail.component.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@
44
angular.
55
module('phoneDetail').
66
component('phoneDetail', {
7-
template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
8-
controller: ['$routeParams',
9-
function PhoneDetailController($routeParams) {
10-
this.phoneId = $routeParams.phoneId;
7+
templateUrl: 'phone-detail/phone-detail.template.html',
8+
controller: ['$http', '$routeParams',
9+
function PhoneDetailController($http, $routeParams) {
10+
var self = this;
11+
12+
$http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
13+
self.phone = response.data;
14+
});
1115
}
1216
]
1317
});

‎app/phone-detail/phone-detail.component.spec.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
describe('phoneDetail', function() {
4+
5+
// Load the module that contains the `phoneDetail` component before each test
6+
beforeEach(module('phoneDetail'));
7+
8+
// Test the controller
9+
describe('PhoneDetailController', function() {
10+
var $httpBackend, ctrl;
11+
12+
beforeEach(inject(function($componentController, _$httpBackend_, $routeParams) {
13+
$httpBackend = _$httpBackend_;
14+
$httpBackend.expectGET('phones/xyz.json').respond({name: 'phone xyz'});
15+
16+
$routeParams.phoneId = 'xyz';
17+
18+
ctrl = $componentController('phoneDetail');
19+
}));
20+
21+
it('should fetch the phone details', function() {
22+
expect(ctrl.phone).toBeUndefined();
23+
24+
$httpBackend.flush();
25+
expect(ctrl.phone).toEqual({name: 'phone xyz'});
26+
});
27+
28+
});
29+
30+
});

‎app/phone-detail/phone-detail.template.html

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<img ng-src="{{$ctrl.phone.images[0]}}" class="phone" />
2+
3+
<h1>{{$ctrl.phone.name}}</h1>
4+
5+
<p>{{$ctrl.phone.description}}</p>
6+
7+
<ul class="phone-thumbs">
8+
<li ng-repeat="img in $ctrl.phone.images">
9+
<img ng-src="{{img}}" />
10+
</li>
11+
</ul>
12+
13+
<ul class="specs">
14+
<li>
15+
<span>Availability and Networks</span>
16+
<dl>
17+
<dt>Availability</dt>
18+
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
19+
</dl>
20+
</li>
21+
<li>
22+
<span>Battery</span>
23+
<dl>
24+
<dt>Type</dt>
25+
<dd>{{$ctrl.phone.battery.type}}</dd>
26+
<dt>Talk Time</dt>
27+
<dd>{{$ctrl.phone.battery.talkTime}}</dd>
28+
<dt>Standby time (max)</dt>
29+
<dd>{{$ctrl.phone.battery.standbyTime}}</dd>
30+
</dl>
31+
</li>
32+
<li>
33+
<span>Storage and Memory</span>
34+
<dl>
35+
<dt>RAM</dt>
36+
<dd>{{$ctrl.phone.storage.ram}}</dd>
37+
<dt>Internal Storage</dt>
38+
<dd>{{$ctrl.phone.storage.flash}}</dd>
39+
</dl>
40+
</li>
41+
<li>
42+
<span>Connectivity</span>
43+
<dl>
44+
<dt>Network Support</dt>
45+
<dd>{{$ctrl.phone.connectivity.cell}}</dd>
46+
<dt>WiFi</dt>
47+
<dd>{{$ctrl.phone.connectivity.wifi}}</dd>
48+
<dt>Bluetooth</dt>
49+
<dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
50+
<dt>Infrared</dt>
51+
<dd>{{$ctrl.phone.connectivity.infrared}}</dd>
52+
<dt>GPS</dt>
53+
<dd>{{$ctrl.phone.connectivity.gps}}</dd>
54+
</dl>
55+
</li>
56+
<li>
57+
<span>Android</span>
58+
<dl>
59+
<dt>OS Version</dt>
60+
<dd>{{$ctrl.phone.android.os}}</dd>
61+
<dt>UI</dt>
62+
<dd>{{$ctrl.phone.android.ui}}</dd>
63+
</dl>
64+
</li>
65+
<li>
66+
<span>Size and Weight</span>
67+
<dl>
68+
<dt>Dimensions</dt>
69+
<dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
70+
<dt>Weight</dt>
71+
<dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
72+
</dl>
73+
</li>
74+
<li>
75+
<span>Display</span>
76+
<dl>
77+
<dt>Screen size</dt>
78+
<dd>{{$ctrl.phone.display.screenSize}}</dd>
79+
<dt>Screen resolution</dt>
80+
<dd>{{$ctrl.phone.display.screenResolution}}</dd>
81+
<dt>Touch screen</dt>
82+
<dd>{{$ctrl.phone.display.touchScreen}}</dd>
83+
</dl>
84+
</li>
85+
<li>
86+
<span>Hardware</span>
87+
<dl>
88+
<dt>CPU</dt>
89+
<dd>{{$ctrl.phone.hardware.cpu}}</dd>
90+
<dt>USB</dt>
91+
<dd>{{$ctrl.phone.hardware.usb}}</dd>
92+
<dt>Audio / headphone jack</dt>
93+
<dd>{{$ctrl.phone.hardware.audioJack}}</dd>
94+
<dt>FM Radio</dt>
95+
<dd>{{$ctrl.phone.hardware.fmRadio}}</dd>
96+
<dt>Accelerometer</dt>
97+
<dd>{{$ctrl.phone.hardware.accelerometer}}</dd>
98+
</dl>
99+
</li>
100+
<li>
101+
<span>Camera</span>
102+
<dl>
103+
<dt>Primary</dt>
104+
<dd>{{$ctrl.phone.camera.primary}}</dd>
105+
<dt>Features</dt>
106+
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
107+
</dl>
108+
</li>
109+
<li>
110+
<span>Additional Features</span>
111+
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
112+
</li>
113+
</ul>

‎e2e-tests/scenarios.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ describe('PhoneCat Application', function() {
7373
browser.get('index.html#!/phones/nexus-s');
7474
});
7575

76-
it('should display placeholder page with `phoneId`', function() {
77-
expect(element(by.binding('$ctrl.phoneId')).getText()).toBe('nexus-s');
76+
it('should display the `nexus-s` page', function() {
77+
expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
7878
});
7979

8080
});

0 commit comments

Comments
 (0)