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

Commit 3709937

Browse files
teropateropa
committed
chore(structure): turn controllers into component directives
1 parent d6fb83e commit 3709937

10 files changed

+75
-63
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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,10 @@ angular.module('phonecatApp', [
99
function($routeProvider) {
1010
$routeProvider.
1111
when('/phones', {
12-
templateUrl: 'js/phone_list/phone_list.html',
13-
controller: 'PhoneListCtrl',
14-
controllerAs: 'vm'
12+
template: '<phone-list></phone-list>'
1513
}).
1614
when('/phones/:phoneId', {
17-
templateUrl: 'js/phone_detail/phone_detail.html',
18-
controller: 'PhoneDetailCtrl',
19-
controllerAs: 'vm'
15+
template: '<phone-detail></phone-detail>'
2016
}).
2117
otherwise({
2218
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 & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
'use strict';
22

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

6-
PhonecatDetailCtrl.$inject = ['$routeParams', 'Phone'];
76

8-
function PhonecatDetailCtrl($routeParams, Phone) {
9-
var vm = this;
7+
PhoneDetailCtrl.$inject = ['$routeParams', 'Phone'];
108

11-
vm.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
12-
vm.mainImageUrl = phone.images[0];
9+
function PhoneDetailCtrl($routeParams, Phone) {
10+
var phoneDetail = this;
11+
12+
phoneDetail.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
13+
phoneDetail.mainImageUrl = phone.images[0];
1314
});
1415

15-
vm.setImage = function(imageUrl) {
16-
vm.mainImageUrl = imageUrl;
16+
phoneDetail.setImage = function(imageUrl) {
17+
phoneDetail.mainImageUrl = imageUrl;
1718
};
1819
}

‎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 vm.phone.images"
5-
ng-class="{active: vm.mainImageUrl==img}">
4+
ng-repeat="img in phoneDetail.phone.images"
5+
ng-class="{active: phoneDetail.mainImageUrl==img}">
66
</div>
77

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

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

1212
<ul class="phone-thumbs">
13-
<li ng-repeat="img in vm.phone.images">
14-
<img ng-src="{{img}}" ng-click="vm.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>{{vm.phone.name}}</h1>
2020
<span>Availability and Networks</span>
2121
<dl>
2222
<dt>Availability</dt>
23-
<dd ng-repeat="availability in vm.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>{{vm.phone.battery.type}}</dd>
30+
<dd>{{phoneDetail.phone.battery.type}}</dd>
3131
<dt>Talk Time</dt>
32-
<dd>{{vm.phone.battery.talkTime}}</dd>
32+
<dd>{{phoneDetail.phone.battery.talkTime}}</dd>
3333
<dt>Standby time (max)</dt>
34-
<dd>{{vm.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>{{vm.phone.storage.ram}}</dd>
41+
<dd>{{phoneDetail.phone.storage.ram}}</dd>
4242
<dt>Internal Storage</dt>
43-
<dd>{{vm.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>{{vm.phone.connectivity.cell}}</dd>
50+
<dd>{{phoneDetail.phone.connectivity.cell}}</dd>
5151
<dt>WiFi</dt>
52-
<dd>{{vm.phone.connectivity.wifi}}</dd>
52+
<dd>{{phoneDetail.phone.connectivity.wifi}}</dd>
5353
<dt>Bluetooth</dt>
54-
<dd>{{vm.phone.connectivity.bluetooth}}</dd>
54+
<dd>{{phoneDetail.phone.connectivity.bluetooth}}</dd>
5555
<dt>Infrared</dt>
56-
<dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
56+
<dd>{{phoneDetail.phone.connectivity.infrared | checkmark}}</dd>
5757
<dt>GPS</dt>
58-
<dd>{{vm.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>{{vm.phone.android.os}}</dd>
65+
<dd>{{phoneDetail.phone.android.os}}</dd>
6666
<dt>UI</dt>
67-
<dd>{{vm.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 vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
74+
<dd ng-repeat="dim in phoneDetail.phone.sizeAndWeight.dimensions">{{dim}}</dd>
7575
<dt>Weight</dt>
76-
<dd>{{vm.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>{{vm.phone.display.screenSize}}</dd>
83+
<dd>{{phoneDetail.phone.display.screenSize}}</dd>
8484
<dt>Screen resolution</dt>
85-
<dd>{{vm.phone.display.screenResolution}}</dd>
85+
<dd>{{phoneDetail.phone.display.screenResolution}}</dd>
8686
<dt>Touch screen</dt>
87-
<dd>{{vm.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>{{vm.phone.hardware.cpu}}</dd>
94+
<dd>{{phoneDetail.phone.hardware.cpu}}</dd>
9595
<dt>USB</dt>
96-
<dd>{{vm.phone.hardware.usb}}</dd>
96+
<dd>{{phoneDetail.phone.hardware.usb}}</dd>
9797
<dt>Audio / headphone jack</dt>
98-
<dd>{{vm.phone.hardware.audioJack}}</dd>
98+
<dd>{{phoneDetail.phone.hardware.audioJack}}</dd>
9999
<dt>FM Radio</dt>
100-
<dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
100+
<dd>{{phoneDetail.phone.hardware.fmRadio | checkmark}}</dd>
101101
<dt>Accelerometer</dt>
102-
<dd>{{vm.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>{{vm.phone.camera.primary}}</dd>
109+
<dd>{{phoneDetail.phone.camera.primary}}</dd>
110110
<dt>Features</dt>
111-
<dd>{{vm.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>{{vm.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: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ angular.module('phonecat.list')
66
PhoneListCtrl.$inject = ['Phone'];
77

88
function PhoneListCtrl(Phone) {
9-
var vm = this;
10-
vm.phones = Phone.query();
11-
vm.orderProp = 'age';
9+
this.phones = Phone.query();
10+
this.orderProp = 'age';
1211
}

‎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="vm.query">
6+
Search: <input ng-model="phoneList.query">
77
Sort by:
8-
<select ng-model="vm.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 vm.phones | filter:vm.query | orderBy:vm.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 vm.phones'));
25-
var query = element(by.model('vm.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 vm.phones').column('phone.name'));
41-
var query = element(by.model('vm.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('vm.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('vm.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) {

0 commit comments

Comments
 (0)