Skip to content

Commit 7ca7741

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 7ca7741

27 files changed

+205
-193
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: 22 additions & 0 deletions
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

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: 16 additions & 0 deletions
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

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: 11 additions & 0 deletions
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

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.

‎test/karma.conf.js

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

@@ -31,4 +32,4 @@ module.exports = function(config){
3132
}
3233

3334
});
34-
};
35+
};

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

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

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

‎test/unit/directivesSpec.js

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

‎test/unit/filtersSpec.js

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

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

Lines changed: 11 additions & 0 deletions
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+
});

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use strict';
2+
3+
describe('PhoneDetailCtrl', function() {
4+
5+
var scope, $httpBackend, ctrl,
6+
xyzPhoneData = function() {
7+
return {
8+
name: 'phone xyz',
9+
images: ['image/url1.png', 'image/url2.png']
10+
}
11+
};
12+
13+
beforeEach(function(){
14+
this.addMatchers({
15+
toEqualData: function(expected) {
16+
return angular.equals(this.actual, expected);
17+
}
18+
});
19+
});
20+
21+
beforeEach(module('phonecat.detail'));
22+
23+
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
24+
$httpBackend = _$httpBackend_;
25+
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
26+
27+
$routeParams.phoneId = 'xyz';
28+
scope = $rootScope.$new();
29+
ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
30+
}));
31+
32+
it('should fetch phone detail', function() {
33+
expect(scope.phone).toEqualData({});
34+
$httpBackend.flush();
35+
36+
expect(scope.phone).toEqualData(xyzPhoneData());
37+
});
38+
39+
});

0 commit comments

Comments
 (0)