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

Commit 65ddf0e

Browse files
teropateropa
committed
chore(structure): turn controllers into component directives
1 parent 7ca7741 commit 65ddf0e

12 files changed

+88
-74
lines changed

‎app/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
<script src="js/core/phone.factory.js"></script>
1919
<script src="js/phone_detail/phone_detail.module.js"></script>
2020
<script src="js/phone_detail/phone.animation.js"></script>
21+
<script src="js/phone_detail/phone_detail.component.js"></script>
2122
<script src="js/phone_detail/phone_detail.controller.js"></script>
2223
<script src="js/phone_list/phone_list.module.js"></script>
24+
<script src="js/phone_list/phone_list.component.js"></script>
2325
<script src="js/phone_list/phone_list.controller.js"></script>
2426
</head>
2527
<body>

‎app/js/app.module.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ angular.module('phonecatApp', [
99
function($routeProvider) {
1010
$routeProvider.
1111
when('/phones', {
12-
templateUrl: 'js/phone_list/phone_list.html',
13-
controller: 'PhoneListCtrl'
12+
template: '<phone-list></phone-list>'
1413
}).
1514
when('/phones/:phoneId', {
16-
templateUrl: 'js/phone_detail/phone_detail.html',
17-
controller: 'PhoneDetailCtrl'
15+
template: '<phone-detail></phone-detail>'
1816
}).
1917
otherwise({
2018
redirectTo: '/phones'

‎app/js/phone_detail/phone_detail.component.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
angular.module('phonecat.detail')
4+
.component('phoneDetail', {
5+
templateUrl: 'js/phone_detail/phone_detail.html',
6+
controller: 'PhoneDetailCtrl'
7+
});

‎app/js/phone_detail/phone_detail.controller.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
'use strict';
22

33
angular.module('phonecat.detail')
4-
.controller('PhoneDetailCtrl', PhonecatDetailCtrl);
4+
.controller('PhoneDetailCtrl', PhoneDetailCtrl);
55

6-
PhonecatDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
6+
PhoneDetailCtrl.$inject = ['$routeParams', 'Phone'];
77

8-
function PhonecatDetailCtrl($scope, $routeParams, Phone) {
9-
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
10-
$scope.mainImageUrl = phone.images[0];
8+
function PhoneDetailCtrl($routeParams, Phone) {
9+
var phoneDetail = this;
10+
11+
phoneDetail.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
12+
phoneDetail.mainImageUrl = phone.images[0];
1113
});
1214

13-
$scope.setImage = function(imageUrl) {
14-
$scope.mainImageUrl = imageUrl;
15+
phoneDetail.setImage = function(imageUrl) {
16+
phoneDetail.mainImageUrl = imageUrl;
1517
};
1618
}

‎app/js/phone_detail/phone_detail.html

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<div class="phone-images">
22
<img ng-src="{{img}}"
33
class="phone"
4-
ng-repeat="img in phone.images"
5-
ng-class="{active: mainImageUrl==img}">
4+
ng-repeat="img in phoneDetail.phone.images"
5+
ng-class="{active: phoneDetail.mainImageUrl==img}">
66
</div>
77

8-
<h1>{{phone.name}}</h1>
8+
<h1>{{phoneDetail.phone.name}}</h1>
99

10-
<p>{{phone.description}}</p>
10+
<p>{{phoneDetail.phone.description}}</p>
1111

1212
<ul class="phone-thumbs">
13-
<li ng-repeat="img in phone.images">
14-
<img ng-src="{{img}}" ng-click="setImage(img)">
13+
<li ng-repeat="img in phoneDetail.phone.images">
14+
<img ng-src="{{img}}" ng-click="phoneDetail.setImage(img)">
1515
</li>
1616
</ul>
1717

@@ -20,99 +20,99 @@ <h1>{{phone.name}}</h1>
2020
<span>Availability and Networks</span>
2121
<dl>
2222
<dt>Availability</dt>
23-
<dd ng-repeat="availability in phone.availability">{{availability}}</dd>
23+
<dd ng-repeat="availability in phoneDetail.phone.availability">{{availability}}</dd>
2424
</dl>
2525
</li>
2626
<li>
2727
<span>Battery</span>
2828
<dl>
2929
<dt>Type</dt>
30-
<dd>{{phone.battery.type}}</dd>
30+
<dd>{{phoneDetail.phone.battery.type}}</dd>
3131
<dt>Talk Time</dt>
32-
<dd>{{phone.battery.talkTime}}</dd>
32+
<dd>{{phoneDetail.phone.battery.talkTime}}</dd>
3333
<dt>Standby time (max)</dt>
34-
<dd>{{phone.battery.standbyTime}}</dd>
34+
<dd>{{phoneDetail.phone.battery.standbyTime}}</dd>
3535
</dl>
3636
</li>
3737
<li>
3838
<span>Storage and Memory</span>
3939
<dl>
4040
<dt>RAM</dt>
41-
<dd>{{phone.storage.ram}}</dd>
41+
<dd>{{phoneDetail.phone.storage.ram}}</dd>
4242
<dt>Internal Storage</dt>
43-
<dd>{{phone.storage.flash}}</dd>
43+
<dd>{{phoneDetail.phone.storage.flash}}</dd>
4444
</dl>
4545
</li>
4646
<li>
4747
<span>Connectivity</span>
4848
<dl>
4949
<dt>Network Support</dt>
50-
<dd>{{phone.connectivity.cell}}</dd>
50+
<dd>{{phoneDetail.phone.connectivity.cell}}</dd>
5151
<dt>WiFi</dt>
52-
<dd>{{phone.connectivity.wifi}}</dd>
52+
<dd>{{phoneDetail.phone.connectivity.wifi}}</dd>
5353
<dt>Bluetooth</dt>
54-
<dd>{{phone.connectivity.bluetooth}}</dd>
54+
<dd>{{phoneDetail.phone.connectivity.bluetooth}}</dd>
5555
<dt>Infrared</dt>
56-
<dd>{{phone.connectivity.infrared | checkmark}}</dd>
56+
<dd>{{phoneDetail.phone.connectivity.infrared | checkmark}}</dd>
5757
<dt>GPS</dt>
58-
<dd>{{phone.connectivity.gps | checkmark}}</dd>
58+
<dd>{{phoneDetail.phone.connectivity.gps | checkmark}}</dd>
5959
</dl>
6060
</li>
6161
<li>
6262
<span>Android</span>
6363
<dl>
6464
<dt>OS Version</dt>
65-
<dd>{{phone.android.os}}</dd>
65+
<dd>{{phoneDetail.phone.android.os}}</dd>
6666
<dt>UI</dt>
67-
<dd>{{phone.android.ui}}</dd>
67+
<dd>{{phoneDetail.phone.android.ui}}</dd>
6868
</dl>
6969
</li>
7070
<li>
7171
<span>Size and Weight</span>
7272
<dl>
7373
<dt>Dimensions</dt>
74-
<dd ng-repeat="dim in phone.sizeAndWeight.dimensions">{{dim}}</dd>
74+
<dd ng-repeat="dim in phoneDetail.phone.sizeAndWeight.dimensions">{{dim}}</dd>
7575
<dt>Weight</dt>
76-
<dd>{{phone.sizeAndWeight.weight}}</dd>
76+
<dd>{{phoneDetail.phone.sizeAndWeight.weight}}</dd>
7777
</dl>
7878
</li>
7979
<li>
8080
<span>Display</span>
8181
<dl>
8282
<dt>Screen size</dt>
83-
<dd>{{phone.display.screenSize}}</dd>
83+
<dd>{{phoneDetail.phone.display.screenSize}}</dd>
8484
<dt>Screen resolution</dt>
85-
<dd>{{phone.display.screenResolution}}</dd>
85+
<dd>{{phoneDetail.phone.display.screenResolution}}</dd>
8686
<dt>Touch screen</dt>
87-
<dd>{{phone.display.touchScreen | checkmark}}</dd>
87+
<dd>{{phoneDetail.phone.display.touchScreen | checkmark}}</dd>
8888
</dl>
8989
</li>
9090
<li>
9191
<span>Hardware</span>
9292
<dl>
9393
<dt>CPU</dt>
94-
<dd>{{phone.hardware.cpu}}</dd>
94+
<dd>{{phoneDetail.phone.hardware.cpu}}</dd>
9595
<dt>USB</dt>
96-
<dd>{{phone.hardware.usb}}</dd>
96+
<dd>{{phoneDetail.phone.hardware.usb}}</dd>
9797
<dt>Audio / headphone jack</dt>
98-
<dd>{{phone.hardware.audioJack}}</dd>
98+
<dd>{{phoneDetail.phone.hardware.audioJack}}</dd>
9999
<dt>FM Radio</dt>
100-
<dd>{{phone.hardware.fmRadio | checkmark}}</dd>
100+
<dd>{{phoneDetail.phone.hardware.fmRadio | checkmark}}</dd>
101101
<dt>Accelerometer</dt>
102-
<dd>{{phone.hardware.accelerometer | checkmark}}</dd>
102+
<dd>{{phoneDetail.phone.hardware.accelerometer | checkmark}}</dd>
103103
</dl>
104104
</li>
105105
<li>
106106
<span>Camera</span>
107107
<dl>
108108
<dt>Primary</dt>
109-
<dd>{{phone.camera.primary}}</dd>
109+
<dd>{{phoneDetail.phone.camera.primary}}</dd>
110110
<dt>Features</dt>
111-
<dd>{{phone.camera.features.join(', ')}}</dd>
111+
<dd>{{phoneDetail.phone.camera.features.join(', ')}}</dd>
112112
</dl>
113113
</li>
114114
<li>
115115
<span>Additional Features</span>
116-
<dd>{{phone.additionalFeatures}}</dd>
116+
<dd>{{phoneDetail.phone.additionalFeatures}}</dd>
117117
</li>
118118
</ul>

‎app/js/phone_list/phone_list.component.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
angular.module('phonecat.list')
4+
.component('phoneList', {
5+
templateUrl: 'js/phone_list/phone_list.html',
6+
controller: 'PhoneListCtrl'
7+
});

‎app/js/phone_list/phone_list.controller.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
angular.module('phonecat.list')
44
.controller('PhoneListCtrl', PhoneListCtrl);
55

6-
PhoneListCtrl.$inject = ['$scope', 'Phone'];
6+
PhoneListCtrl.$inject = ['Phone'];
77

8-
function PhoneListCtrl($scope, Phone) {
9-
$scope.phones = Phone.query();
10-
$scope.orderProp = 'age';
8+
function PhoneListCtrl(Phone) {
9+
this.phones = Phone.query();
10+
this.orderProp = 'age';
1111
}

‎app/js/phone_list/phone_list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<div class="col-md-2">
44
<!--Sidebar content-->
55

6-
Search: <input ng-model="query">
6+
Search: <input ng-model="phoneList.query">
77
Sort by:
8-
<select ng-model="orderProp">
8+
<select ng-model="phoneList.orderProp">
99
<option value="name">Alphabetical</option>
1010
<option value="age">Newest</option>
1111
</select>
@@ -15,7 +15,7 @@
1515
<!--Body content-->
1616

1717
<ul class="phones">
18-
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
18+
<li ng-repeat="phone in phoneList.phones | filter:phoneList.query | orderBy:phoneList.orderProp"
1919
class="thumbnail phone-listing">
2020
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
2121
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

‎bower.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
"license": "MIT",
77
"private": true,
88
"dependencies": {
9-
"angular": "1.4.x",
10-
"angular-mocks": "1.4.x",
9+
"angular": "1.5.0-rc.0",
10+
"angular-mocks": "1.5.0-rc.0",
1111
"jquery": "~2.1.1",
1212
"bootstrap": "~3.1.1",
13-
"angular-route": "1.4.x",
14-
"angular-resource": "1.4.x",
15-
"angular-animate": "1.4.x"
13+
"angular-route": "1.5.0-rc.0",
14+
"angular-resource": "1.5.0-rc.0",
15+
"angular-animate": "1.5.0-rc.0"
1616
}
1717
}

‎test/e2e/scenarios.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ describe('PhoneCat App', function() {
2121

2222
it('should filter the phone list as a user types into the search box', function() {
2323

24-
var phoneList = element.all(by.repeater('phone in phones'));
25-
var query = element(by.model('query'));
24+
var phoneList = element.all(by.repeater('phone in phoneList.phones'));
25+
var query = element(by.model('phoneList.query'));
2626

2727
expect(phoneList.count()).toBe(20);
2828

@@ -37,8 +37,8 @@ describe('PhoneCat App', function() {
3737

3838
it('should be possible to control phone order via the drop down select box', function() {
3939

40-
var phoneNameColumn = element.all(by.repeater('phone in phones').column('phone.name'));
41-
var query = element(by.model('query'));
40+
var phoneNameColumn = element.all(by.repeater('phone in phoneList.phones').column('phone.name'));
41+
var query = element(by.model('phoneList.query'));
4242

4343
function getNames() {
4444
return phoneNameColumn.map(function(elm) {
@@ -53,7 +53,7 @@ describe('PhoneCat App', function() {
5353
"MOTOROLA XOOM\u2122"
5454
]);
5555

56-
element(by.model('orderProp')).element(by.css('option[value="name"]')).click();
56+
element(by.model('phoneList.orderProp')).element(by.css('option[value="name"]')).click();
5757

5858
expect(getNames()).toEqual([
5959
"MOTOROLA XOOM\u2122",
@@ -63,7 +63,7 @@ describe('PhoneCat App', function() {
6363

6464

6565
it('should render phone specific links', function() {
66-
var query = element(by.model('query'));
66+
var query = element(by.model('phoneList.query'));
6767
query.sendKeys('nexus');
6868
element.all(by.css('.phones li a')).first().click();
6969
browser.getLocationAbsUrl().then(function(url) {

‎test/unit/phone_detail.controller.spec.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
describe('PhoneDetailCtrl', function() {
44

5-
var scope, $httpBackend, ctrl,
5+
var $httpBackend, ctrl,
66
xyzPhoneData = function() {
77
return {
88
name: 'phone xyz',
@@ -20,20 +20,19 @@ describe('PhoneDetailCtrl', function() {
2020

2121
beforeEach(module('phonecat.detail'));
2222

23-
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
23+
beforeEach(inject(function(_$httpBackend_, $routeParams, $controller) {
2424
$httpBackend = _$httpBackend_;
2525
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
2626

2727
$routeParams.phoneId = 'xyz';
28-
scope = $rootScope.$new();
29-
ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
28+
ctrl = $controller('PhoneDetailCtrl');
3029
}));
3130

3231
it('should fetch phone detail', function() {
33-
expect(scope.phone).toEqualData({});
32+
expect(ctrl.phone).toEqualData({});
3433
$httpBackend.flush();
3534

36-
expect(scope.phone).toEqualData(xyzPhoneData());
35+
expect(ctrl.phone).toEqualData(xyzPhoneData());
3736
});
3837

3938
});

‎test/unit/phone_list.controller.spec.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
describe('PhoneListCtrl', function(){
4-
var scope, ctrl, $httpBackend;
4+
var ctrl, $httpBackend;
55

66
beforeEach(function(){
77
this.addMatchers({
@@ -13,24 +13,23 @@ describe('PhoneListCtrl', function(){
1313

1414
beforeEach(module('phonecat.list'));
1515

16-
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
16+
beforeEach(inject(function(_$httpBackend_, $controller) {
1717
$httpBackend = _$httpBackend_;
1818
$httpBackend.expectGET('phones/phones.json').
1919
respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
2020

21-
scope = $rootScope.$new();
22-
ctrl = $controller('PhoneListCtrl', {$scope: scope});
21+
ctrl = $controller('PhoneListCtrl');
2322
}));
2423

2524
it('should create "phones" model with 2 phones fetched from xhr', function() {
26-
expect(scope.phones).toEqualData([]);
25+
expect(ctrl.phones).toEqualData([]);
2726
$httpBackend.flush();
2827

29-
expect(scope.phones).toEqualData(
28+
expect(ctrl.phones).toEqualData(
3029
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
3130
});
3231

3332
it('should set the default value of orderProp model', function() {
34-
expect(scope.orderProp).toBe('age');
33+
expect(ctrl.orderProp).toBe('age');
3534
});
3635
});

0 commit comments

Comments
 (0)