From d6fb83e1c2db9d1812c7c478fdb8d92301ef0061 Mon Sep 17 00:00:00 2001 From: Tero Parviainen Date: Fri, 11 Dec 2015 14:01:59 +0200 Subject: [PATCH] chore(structure): refactor to Angular style guide conventions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/index.html | 14 ++- app/js/app.js | 28 ----- app/js/app.module.js | 24 ++++ app/js/controllers.js | 22 ---- app/js/core/checkmark.filter.js | 10 ++ app/js/core/core.module.js | 5 + app/js/core/phone.factory.js | 12 ++ app/js/directives.js | 3 - app/js/filters.js | 9 -- .../phone.animation.js} | 9 +- .../phone_detail/phone_detail.controller.js | 18 +++ app/js/phone_detail/phone_detail.html | 118 ++++++++++++++++++ app/js/phone_detail/phone_detail.module.js | 7 ++ app/js/phone_list/phone_list.controller.js | 12 ++ .../phone_list/phone_list.html} | 6 +- app/js/phone_list/phone_list.module.js | 5 + app/js/services.js | 12 -- app/partials/.gitkeep | 0 app/partials/phone-detail.html | 118 ------------------ test/e2e/scenarios.js | 12 +- test/karma.conf.js | 5 +- test/unit/checkmark.filter.spec.js | 13 ++ test/unit/controllersSpec.js | 72 ----------- test/unit/directivesSpec.js | 7 -- test/unit/filtersSpec.js | 18 --- test/unit/phone.factory.spec.js | 11 ++ test/unit/phone_detail.controller.spec.js | 38 ++++++ test/unit/phone_list.controller.spec.js | 35 ++++++ test/unit/servicesSpec.js | 12 -- 29 files changed, 335 insertions(+), 320 deletions(-) delete mode 100644 app/js/app.js create mode 100644 app/js/app.module.js delete mode 100644 app/js/controllers.js create mode 100644 app/js/core/checkmark.filter.js create mode 100644 app/js/core/core.module.js create mode 100644 app/js/core/phone.factory.js delete mode 100644 app/js/directives.js delete mode 100644 app/js/filters.js rename app/js/{animations.js => phone_detail/phone.animation.js} (85%) create mode 100644 app/js/phone_detail/phone_detail.controller.js create mode 100644 app/js/phone_detail/phone_detail.html create mode 100644 app/js/phone_detail/phone_detail.module.js create mode 100644 app/js/phone_list/phone_list.controller.js rename app/{partials/phone-list.html => js/phone_list/phone_list.html} (78%) create mode 100644 app/js/phone_list/phone_list.module.js delete mode 100644 app/js/services.js delete mode 100644 app/partials/.gitkeep delete mode 100644 app/partials/phone-detail.html create mode 100644 test/unit/checkmark.filter.spec.js delete mode 100644 test/unit/controllersSpec.js delete mode 100644 test/unit/directivesSpec.js delete mode 100644 test/unit/filtersSpec.js create mode 100644 test/unit/phone.factory.spec.js create mode 100644 test/unit/phone_detail.controller.spec.js create mode 100644 test/unit/phone_list.controller.spec.js delete mode 100644 test/unit/servicesSpec.js diff --git a/app/index.html b/app/index.html index e2e20d4be..54a8830d8 100644 --- a/app/index.html +++ b/app/index.html @@ -12,11 +12,15 @@ - - - - - + + + + + + + + + diff --git a/app/js/app.js b/app/js/app.js deleted file mode 100644 index a58955cd1..000000000 --- a/app/js/app.js +++ /dev/null @@ -1,28 +0,0 @@ -'use strict'; - -/* App Module */ - -var phonecatApp = angular.module('phonecatApp', [ - 'ngRoute', - 'phonecatAnimations', - - 'phonecatControllers', - 'phonecatFilters', - 'phonecatServices' -]); - -phonecatApp.config(['$routeProvider', - function($routeProvider) { - $routeProvider. - when('/phones', { - templateUrl: 'partials/phone-list.html', - controller: 'PhoneListCtrl' - }). - when('/phones/:phoneId', { - templateUrl: 'partials/phone-detail.html', - controller: 'PhoneDetailCtrl' - }). - otherwise({ - redirectTo: '/phones' - }); - }]); diff --git a/app/js/app.module.js b/app/js/app.module.js new file mode 100644 index 000000000..1364b2418 --- /dev/null +++ b/app/js/app.module.js @@ -0,0 +1,24 @@ +'use strict'; + +angular.module('phonecatApp', [ + 'ngRoute', + 'phonecat.core', + 'phonecat.detail', + 'phonecat.list' + ]).config(['$routeProvider', + function($routeProvider) { + $routeProvider. + when('/phones', { + templateUrl: 'js/phone_list/phone_list.html', + controller: 'PhoneListCtrl', + controllerAs: 'vm' + }). + when('/phones/:phoneId', { + templateUrl: 'js/phone_detail/phone_detail.html', + controller: 'PhoneDetailCtrl', + controllerAs: 'vm' + }). + otherwise({ + redirectTo: '/phones' + }); + }]); diff --git a/app/js/controllers.js b/app/js/controllers.js deleted file mode 100644 index 13e3c487d..000000000 --- a/app/js/controllers.js +++ /dev/null @@ -1,22 +0,0 @@ -'use strict'; - -/* Controllers */ - -var phonecatControllers = angular.module('phonecatControllers', []); - -phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', - function($scope, Phone) { - $scope.phones = Phone.query(); - $scope.orderProp = 'age'; - }]); - -phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', - function($scope, $routeParams, Phone) { - $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) { - $scope.mainImageUrl = phone.images[0]; - }); - - $scope.setImage = function(imageUrl) { - $scope.mainImageUrl = imageUrl; - }; - }]); diff --git a/app/js/core/checkmark.filter.js b/app/js/core/checkmark.filter.js new file mode 100644 index 000000000..19a14e33c --- /dev/null +++ b/app/js/core/checkmark.filter.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('phonecat.core') + .filter('checkmark', checkmarkFilter); + +function checkmarkFilter() { + return function(input) { + return input ? '\u2713' : '\u2718'; + }; +} diff --git a/app/js/core/core.module.js b/app/js/core/core.module.js new file mode 100644 index 000000000..ffde7ec14 --- /dev/null +++ b/app/js/core/core.module.js @@ -0,0 +1,5 @@ +'use strict'; + +angular.module('phonecat.core', [ + 'ngResource' +]); diff --git a/app/js/core/phone.factory.js b/app/js/core/phone.factory.js new file mode 100644 index 000000000..fb6f8360c --- /dev/null +++ b/app/js/core/phone.factory.js @@ -0,0 +1,12 @@ +'use strict'; + +angular.module('phonecat.core') + .factory('Phone', Phone); + +Phone.$inject = ['$resource']; + +function Phone($resource) { + return $resource('phones/:phoneId.json', {}, { + query: {method:'GET', params:{phoneId:'phones'}, isArray:true} + }); +} diff --git a/app/js/directives.js b/app/js/directives.js deleted file mode 100644 index ebc5dd144..000000000 --- a/app/js/directives.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict'; - -/* Directives */ diff --git a/app/js/filters.js b/app/js/filters.js deleted file mode 100644 index 4f62309ba..000000000 --- a/app/js/filters.js +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; - -/* Filters */ - -angular.module('phonecatFilters', []).filter('checkmark', function() { - return function(input) { - return input ? '\u2713' : '\u2718'; - }; -}); diff --git a/app/js/animations.js b/app/js/phone_detail/phone.animation.js similarity index 85% rename from app/js/animations.js rename to app/js/phone_detail/phone.animation.js index 8f3404265..038ab2a8b 100644 --- a/app/js/animations.js +++ b/app/js/phone_detail/phone.animation.js @@ -1,6 +1,9 @@ -var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']); +'use strict'; -phonecatAnimations.animation('.phone', function() { +angular.module('phonecat.detail') + .animation('.phone', phoneAnimation); + +function phoneAnimation() { var animateUp = function(element, className, done) { if(className != 'active') { @@ -49,4 +52,4 @@ phonecatAnimations.animation('.phone', function() { addClass: animateUp, removeClass: animateDown }; -}); +} diff --git a/app/js/phone_detail/phone_detail.controller.js b/app/js/phone_detail/phone_detail.controller.js new file mode 100644 index 000000000..0ade9725f --- /dev/null +++ b/app/js/phone_detail/phone_detail.controller.js @@ -0,0 +1,18 @@ +'use strict'; + +angular.module('phonecat.detail') + .controller('PhoneDetailCtrl', PhonecatDetailCtrl); + +PhonecatDetailCtrl.$inject = ['$routeParams', 'Phone']; + +function PhonecatDetailCtrl($routeParams, Phone) { + var vm = this; + + vm.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) { + vm.mainImageUrl = phone.images[0]; + }); + + vm.setImage = function(imageUrl) { + vm.mainImageUrl = imageUrl; + }; +} diff --git a/app/js/phone_detail/phone_detail.html b/app/js/phone_detail/phone_detail.html new file mode 100644 index 000000000..954c65c2c --- /dev/null +++ b/app/js/phone_detail/phone_detail.html @@ -0,0 +1,118 @@ +
+ +
+ +

{{vm.phone.name}}

+ +

{{vm.phone.description}}

+ + + + diff --git a/app/js/phone_detail/phone_detail.module.js b/app/js/phone_detail/phone_detail.module.js new file mode 100644 index 000000000..22581d3d2 --- /dev/null +++ b/app/js/phone_detail/phone_detail.module.js @@ -0,0 +1,7 @@ +'use strict'; + +angular.module('phonecat.detail', [ + 'ngRoute', + 'ngAnimate', + 'phonecat.core' +]); diff --git a/app/js/phone_list/phone_list.controller.js b/app/js/phone_list/phone_list.controller.js new file mode 100644 index 000000000..c93603714 --- /dev/null +++ b/app/js/phone_list/phone_list.controller.js @@ -0,0 +1,12 @@ +'use strict'; + +angular.module('phonecat.list') + .controller('PhoneListCtrl', PhoneListCtrl); + +PhoneListCtrl.$inject = ['Phone']; + +function PhoneListCtrl(Phone) { + var vm = this; + vm.phones = Phone.query(); + vm.orderProp = 'age'; +} diff --git a/app/partials/phone-list.html b/app/js/phone_list/phone_list.html similarity index 78% rename from app/partials/phone-list.html rename to app/js/phone_list/phone_list.html index e9ec19e39..471f474e8 100644 --- a/app/partials/phone-list.html +++ b/app/js/phone_list/phone_list.html @@ -3,9 +3,9 @@
- Search: + Search: Sort by: - @@ -15,7 +15,7 @@