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

Commit c512e04

Browse files
petebacondarwinpetebacondarwin
committed
step-8 phone details view
- Fetch data for and render phone detail view - PhoneDetailCtrl controller to fetch details json with [$http] for a specific phone - template for the phone detailed view - CSS to make the phone details page look "pretty"
1 parent 44d268b commit c512e04

File tree

5 files changed

+197
-8
lines changed

5 files changed

+197
-8
lines changed

‎app/css/app.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,59 @@ body {
2121
height: 115px;
2222
padding-top: 15px;
2323
}
24+
25+
/** Detail View **/
26+
img.phone {
27+
float: left;
28+
border: 1px solid black;
29+
margin-right: 3em;
30+
margin-bottom: 2em;
31+
background-color: white;
32+
padding: 2em;
33+
height: 400px;
34+
width: 400px;
35+
}
36+
37+
ul.phone-thumbs {
38+
margin: 0;
39+
list-style: none;
40+
}
41+
42+
ul.phone-thumbs li {
43+
border: 1px solid black;
44+
display: inline-block;
45+
margin: 1em;
46+
background-color: white;
47+
}
48+
49+
ul.phone-thumbs img {
50+
height: 100px;
51+
width: 100px;
52+
padding: 1em;
53+
}
54+
55+
ul.specs {
56+
clear: both;
57+
margin: 0;
58+
padding: 0;
59+
list-style: none;
60+
}
61+
62+
ul.specs > li{
63+
display: inline-block;
64+
width: 200px;
65+
vertical-align: top;
66+
}
67+
68+
ul.specs > li > span{
69+
font-weight: bold;
70+
font-size: 1.2em;
71+
}
72+
73+
ul.specs dt {
74+
font-weight: bold;
75+
}
76+
77+
h1 {
78+
border-bottom: 1px solid gray;
79+
}

‎app/js/controllers.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
1313
$scope.orderProp = 'age';
1414
}]);
1515

16-
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
17-
function($scope, $routeParams) {
18-
$scope.phoneId = $routeParams.phoneId;
16+
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
17+
function($scope, $routeParams, $http) {
18+
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
19+
$scope.phone = data;
20+
});
1921
}]);

‎app/partials/phone-detail.html

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

‎test/e2e/scenarios.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('PhoneCat App', function() {
6565
it('should render phone specific links', function() {
6666
var query = element(by.model('query'));
6767
query.sendKeys('nexus');
68-
element(by.css('.phones li a')).click();
68+
element.all(by.css('.phones li a')).first().click();
6969
browser.getLocationAbsUrl().then(function(url) {
7070
expect(url).toEqual('/phones/nexus-s');
7171
});
@@ -80,8 +80,8 @@ describe('PhoneCat App', function() {
8080
});
8181

8282

83-
it('should display placeholder page with phoneId', function() {
84-
expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
83+
it('should display nexus-s page', function() {
84+
expect(element(by.binding('phone.name')).getText()).toBe('Nexus S');
8585
});
8686
});
8787
});

‎test/unit/controllersSpec.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
/* jasmine specs for controllers go here */
44
describe('PhoneCat controllers', function() {
55

6+
beforeEach(module('phonecatApp'));
7+
68
describe('PhoneListCtrl', function(){
79
var scope, ctrl, $httpBackend;
810

9-
beforeEach(module('phonecatApp'));
1011
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
1112
$httpBackend = _$httpBackend_;
1213
$httpBackend.expectGET('phones/phones.json').
@@ -33,5 +34,23 @@ describe('PhoneCat controllers', function() {
3334

3435

3536
describe('PhoneDetailCtrl', function(){
37+
var scope, $httpBackend, ctrl;
38+
39+
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
40+
$httpBackend = _$httpBackend_;
41+
$httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
42+
43+
$routeParams.phoneId = 'xyz';
44+
scope = $rootScope.$new();
45+
ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
46+
}));
47+
48+
49+
it('should fetch phone detail', function() {
50+
expect(scope.phone).toBeUndefined();
51+
$httpBackend.flush();
52+
53+
expect(scope.phone).toEqual({name:'phone xyz'});
54+
});
3655
});
3756
});

0 commit comments

Comments
 (0)