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

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

Lines changed: 9 additions & 5 deletions
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

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎app/js/app.module.js

Lines changed: 24 additions & 0 deletions
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

Lines changed: 0 additions & 22 deletions
This file was deleted.

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

Lines changed: 10 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 12 additions & 0 deletions
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

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎app/js/filters.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 6 additions & 3 deletions
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

Lines changed: 18 additions & 0 deletions
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

Lines changed: 118 additions & 0 deletions
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

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+
'ngRoute',
5+
'ngAnimate',
6+
'phonecat.core'
7+
]);

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

Lines changed: 12 additions & 0 deletions
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

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="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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎app/partials/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)