Skip to content

Commit 2cbf7a6

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 Related to angular/angular.js#13312
1 parent 5e54104 commit 2cbf7a6

27 files changed

+208
-194
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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
}).
15+
when('/phones/:phoneId', {
16+
templateUrl: 'js/phone_detail/phone_detail.html',
17+
controller: 'PhoneDetailCtrl'
18+
}).
19+
otherwise({
20+
redirectTo: '/phones'
21+
});
22+
}]);

‎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

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

‎app/partials/phone-detail.html renamed to ‎app/js/phone_detail/phone_detail.html

File renamed without changes.

‎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

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

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

File renamed without changes.

‎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.

‎test/karma.conf.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ module.exports = function(config){
99
'app/bower_components/angular-resource/angular-resource.js',
1010
'app/bower_components/angular-animate/angular-animate.js',
1111
'app/bower_components/angular-mocks/angular-mocks.js',
12-
'app/js/**/*.js',
12+
'app/js/**/*.module.js',
13+
'app/js/**/*.{animation,controller,directive,factory,filter,service}.js',
1314
'test/unit/**/*.js'
1415
],
1516

@@ -28,7 +29,9 @@ module.exports = function(config){
2829
junitReporter : {
2930
outputFile: 'test_out/unit.xml',
3031
suite: 'unit'
31-
}
32+
},
33+
34+
logLevel: 'LOG_DEBUG'
3235

3336
});
34-
};
37+
};

‎test/unit/checkmark.filter.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
4+
describe('checkmarkFilter', function() {
5+
6+
beforeEach(module('phonecat.core'));
7+
8+
it('should convert boolean values to unicode checkmark or cross',
9+
inject(function(checkmarkFilter) {
10+
expect(checkmarkFilter(true)).toBe('\u2713');
11+
expect(checkmarkFilter(false)).toBe('\u2718');
12+
}));
13+
});

‎test/unit/controllersSpec.js

-72
This file was deleted.

‎test/unit/directivesSpec.js

-7
This file was deleted.

‎test/unit/filtersSpec.js

-18
This file was deleted.

‎test/unit/phone.factory.spec.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use strict';
2+
3+
describe('phoneFactory', function() {
4+
5+
beforeEach(module('phonecat.core'));
6+
7+
it('check the existence of Phone factory', inject(function(Phone) {
8+
expect(Phone).toBeDefined();
9+
}));
10+
11+
});

0 commit comments

Comments
 (0)