Skip to content

Commit d6fb83e

Browse files
teropateropa
committed
chore(structure): refactor to Angular style guide conventions
Reorganize application code to be more closely aligned with the Angular Style Guide. This is for the final version of the app and hasn’t been factored into steps or into the tutorial text. 1. Folders-by-feature structure: /core, /phone_list, /phone_detail https://github.com/johnpapa/angular-styleguide#style-y152 2. App root module depends on feature modules and core module. https://github.com/johnpapa/angular-styleguide#style-y165 3. One component per file. Each controller/factory/filter in its own file. https://github.com/johnpapa/angular-styleguide#style-y001 4. Feature+type file naming convention. https://github.com/johnpapa/angular-styleguide#style-y120 5. Module files, *.module.js for each module. https://github.com/johnpapa/angular-styleguide#style-y127 6. Component registration with getters https://github.com/johnpapa/angular-styleguide#style-y022 7. Named functions https://github.com/johnpapa/angular-styleguide#style-y024 8. Manual injection https://github.com/johnpapa/angular-styleguide#style-y091 9. controllerAs syntax https://github.com/johnpapa/angular-styleguide#style-y030 Related to angular/angular.js#13312
1 parent 5e54104 commit d6fb83e

29 files changed

+335
-320
lines changed

‎app/index.html

+9-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,15 @@
1212
<script src="bower_components/angular-animate/angular-animate.js"></script>
1313
<script src="bower_components/angular-route/angular-route.js"></script>
1414
<script src="bower_components/angular-resource/angular-resource.js"></script>
15-
<script src="js/app.js"></script>
16-
<script src="js/animations.js"></script>
17-
<script src="js/controllers.js"></script>
18-
<script src="js/filters.js"></script>
19-
<script src="js/services.js"></script>
15+
<script src="js/app.module.js"></script>
16+
<script src="js/core/core.module.js"></script>
17+
<script src="js/core/checkmark.filter.js"></script>
18+
<script src="js/core/phone.factory.js"></script>
19+
<script src="js/phone_detail/phone_detail.module.js"></script>
20+
<script src="js/phone_detail/phone.animation.js"></script>
21+
<script src="js/phone_detail/phone_detail.controller.js"></script>
22+
<script src="js/phone_list/phone_list.module.js"></script>
23+
<script src="js/phone_list/phone_list.controller.js"></script>
2024
</head>
2125
<body>
2226

‎app/js/app.js

-28
This file was deleted.

‎app/js/app.module.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
3+
angular.module('phonecatApp', [
4+
'ngRoute',
5+
'phonecat.core',
6+
'phonecat.detail',
7+
'phonecat.list'
8+
]).config(['$routeProvider',
9+
function($routeProvider) {
10+
$routeProvider.
11+
when('/phones', {
12+
templateUrl: 'js/phone_list/phone_list.html',
13+
controller: 'PhoneListCtrl',
14+
controllerAs: 'vm'
15+
}).
16+
when('/phones/:phoneId', {
17+
templateUrl: 'js/phone_detail/phone_detail.html',
18+
controller: 'PhoneDetailCtrl',
19+
controllerAs: 'vm'
20+
}).
21+
otherwise({
22+
redirectTo: '/phones'
23+
});
24+
}]);

‎app/js/controllers.js

-22
This file was deleted.

‎app/js/core/checkmark.filter.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
3+
angular.module('phonecat.core')
4+
.filter('checkmark', checkmarkFilter);
5+
6+
function checkmarkFilter() {
7+
return function(input) {
8+
return input ? '\u2713' : '\u2718';
9+
};
10+
}

‎app/js/core/core.module.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
angular.module('phonecat.core', [
4+
'ngResource'
5+
]);

‎app/js/core/phone.factory.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use strict';
2+
3+
angular.module('phonecat.core')
4+
.factory('Phone', Phone);
5+
6+
Phone.$inject = ['$resource'];
7+
8+
function Phone($resource) {
9+
return $resource('phones/:phoneId.json', {}, {
10+
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
11+
});
12+
}

‎app/js/directives.js

-3
This file was deleted.

‎app/js/filters.js

-9
This file was deleted.

‎app/js/animations.js renamed to ‎app/js/phone_detail/phone.animation.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
1+
'use strict';
22

3-
phonecatAnimations.animation('.phone', function() {
3+
angular.module('phonecat.detail')
4+
.animation('.phone', phoneAnimation);
5+
6+
function phoneAnimation() {
47

58
var animateUp = function(element, className, done) {
69
if(className != 'active') {
@@ -49,4 +52,4 @@ phonecatAnimations.animation('.phone', function() {
4952
addClass: animateUp,
5053
removeClass: animateDown
5154
};
52-
});
55+
}

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
3+
angular.module('phonecat.detail')
4+
.controller('PhoneDetailCtrl', PhonecatDetailCtrl);
5+
6+
PhonecatDetailCtrl.$inject = ['$routeParams', 'Phone'];
7+
8+
function PhonecatDetailCtrl($routeParams, Phone) {
9+
var vm = this;
10+
11+
vm.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
12+
vm.mainImageUrl = phone.images[0];
13+
});
14+
15+
vm.setImage = function(imageUrl) {
16+
vm.mainImageUrl = imageUrl;
17+
};
18+
}

‎app/js/phone_detail/phone_detail.html

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

‎app/js/phone_detail/phone_detail.module.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
angular.module('phonecat.detail', [
4+
'ngRoute',
5+
'ngAnimate',
6+
'phonecat.core'
7+
]);

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use strict';
2+
3+
angular.module('phonecat.list')
4+
.controller('PhoneListCtrl', PhoneListCtrl);
5+
6+
PhoneListCtrl.$inject = ['Phone'];
7+
8+
function PhoneListCtrl(Phone) {
9+
var vm = this;
10+
vm.phones = Phone.query();
11+
vm.orderProp = 'age';
12+
}

‎app/partials/phone-list.html renamed to ‎app/js/phone_list/phone_list.html

+3-3
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="vm.query">
77
Sort by:
8-
<select ng-model="orderProp">
8+
<select ng-model="vm.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 vm.phones | filter:vm.query | orderBy:vm.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>

‎app/js/phone_list/phone_list.module.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
angular.module('phonecat.list', [
4+
'phonecat.core'
5+
]);

‎app/js/services.js

-12
This file was deleted.

‎app/partials/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)