From e5b915fae48f29608509e77c12b2e2f9f9ae5abe Mon Sep 17 00:00:00 2001 From: Addison Date: Wed, 20 Aug 2014 08:06:08 +0100 Subject: [PATCH] refact(*): update overall application architecture to match best practices --- README.md | 48 +++++++++++--------- app/assets/css/.gitkeep | 0 app/assets/css/app.css | 30 ++++++++++++ app/assets/img/.gitkeep | 0 app/components/directives/appVersion.js | 8 ++++ app/components/filters/interpolate.js | 10 ++++ app/components/services/appVersionService.js | 8 ++++ app/components/view1/view1.html | 1 + app/components/view1/view1.js | 13 ++++++ app/components/view2/view2.html | 5 ++ app/components/view2/view2.js | 13 ++++++ test/unit/view1Spec.js | 19 ++++++++ test/unit/view2Spec.js | 18 ++++++++ 13 files changed, 152 insertions(+), 21 deletions(-) create mode 100644 app/assets/css/.gitkeep create mode 100644 app/assets/css/app.css create mode 100644 app/assets/img/.gitkeep create mode 100644 app/components/directives/appVersion.js create mode 100644 app/components/filters/interpolate.js create mode 100644 app/components/services/appVersionService.js create mode 100644 app/components/view1/view1.html create mode 100644 app/components/view1/view1.js create mode 100644 app/components/view2/view2.html create mode 100644 app/components/view2/view2.js create mode 100644 test/unit/view1Spec.js create mode 100644 test/unit/view2Spec.js diff --git a/README.md b/README.md index e5540ca02c..f01b34b90b 100644 --- a/README.md +++ b/README.md @@ -70,32 +70,38 @@ Now browse to the app at `http://localhost:8000/app/index.html`. ## Directory Layout - app/ --> all of the files to be used in production - css/ --> css files - app.css --> default stylesheet - img/ --> image files - index.html --> app layout file (the main html template file of the app) - index-async.html --> just like index.html, but loads js files asynchronously - js/ --> javascript files - app.js --> application - controllers.js --> application controllers - directives.js --> application directives - filters.js --> custom angular filters - services.js --> custom angular services - partials/ --> angular view partials (partial html templates) - partial1.html - partial2.html - - test/ --> test config and source files + app/ --> all of the files to be used in production + assets/ --> all static asset files + css/ --> css files + app.css --> default stylesheet + img/ --> image files + components/ --> all app specific modules + directives/ --> application level directives + appVersion.js --> custom directive that returns the current app version + filters/ --> application level filters + interpolate.js --> custom interpolation filter + services/ --> application level services + appVersionService.js --> custom service that returns the current app version + view1/ --> a custom module for this application + view1.html --> the template rendered for this module + view1.js --> the application logic for this module + view2/ --> a custom module for this application + view2.html --> the template rendered for this module + view2.js --> the application logic for this module + app.js --> application + index.html --> app layout file (the main html template file of the app) + index-async.html --> just like index.html, but loads js files asynchronously + test/ --> test config and source files protractor-conf.js --> config file for running e2e tests with Protractor e2e/ --> end-to-end specs scenarios.js karma.conf.js --> config file for running unit tests with Karma unit/ --> unit level specs/tests - controllersSpec.js --> specs for controllers - directivessSpec.js --> specs for directives - filtersSpec.js --> specs for filters - servicesSpec.js --> specs for services + directivessSpec.js --> specs for application level directives + filtersSpec.js --> specs for application level filters + servicesSpec.js --> specs for application level services + view1Spec.js --> specs for the view1 module + view2Spec.js --> specs for the view2 module ## Testing diff --git a/app/assets/css/.gitkeep b/app/assets/css/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app/assets/css/app.css b/app/assets/css/app.css new file mode 100644 index 0000000000..c92524070a --- /dev/null +++ b/app/assets/css/app.css @@ -0,0 +1,30 @@ +/* app css stylesheet */ + +.menu { + list-style: none; + border-bottom: 0.1em solid black; + margin-bottom: 2em; + padding: 0 0 0.5em; +} + +.menu:before { + content: "["; +} + +.menu:after { + content: "]"; +} + +.menu > li { + display: inline; +} + +.menu > li:before { + content: "|"; + padding-right: 0.3em; +} + +.menu > li:nth-child(1):before { + content: ""; + padding: 0; +} diff --git a/app/assets/img/.gitkeep b/app/assets/img/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app/components/directives/appVersion.js b/app/components/directives/appVersion.js new file mode 100644 index 0000000000..c4c64bc8b4 --- /dev/null +++ b/app/components/directives/appVersion.js @@ -0,0 +1,8 @@ +'use strict'; + +angular.module('appVersion', []) + .directive('appVersion', ['version', function(version) { + return function(scope, element, attributes, controller) { + element.text(version); + }; + }]); diff --git a/app/components/filters/interpolate.js b/app/components/filters/interpolate.js new file mode 100644 index 0000000000..a863038264 --- /dev/null +++ b/app/components/filters/interpolate.js @@ -0,0 +1,10 @@ +'use strict'; + +/* Filters */ + +angular.module('interpolate', []). + filter('interpolate', ['version', function(version) { + return function(text) { + return String(text).replace(/\%VERSION\%/mg, version); + }; + }]); diff --git a/app/components/services/appVersionService.js b/app/components/services/appVersionService.js new file mode 100644 index 0000000000..142de62414 --- /dev/null +++ b/app/components/services/appVersionService.js @@ -0,0 +1,8 @@ +'use strict'; + +/* Services */ + +// Demonstrate how to register services +// In this case it is a simple value service. +angular.module('appVersionService', []) + .value('version', '0.1'); diff --git a/app/components/view1/view1.html b/app/components/view1/view1.html new file mode 100644 index 0000000000..89459a65ca --- /dev/null +++ b/app/components/view1/view1.html @@ -0,0 +1 @@ +

This is the partial for view 1.

diff --git a/app/components/view1/view1.js b/app/components/view1/view1.js new file mode 100644 index 0000000000..9f59986cc6 --- /dev/null +++ b/app/components/view1/view1.js @@ -0,0 +1,13 @@ +'use strict'; + +angular.module('view1', []) + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/view1', { + templateUrl: 'components/view1/view1.html', + controller: 'MyCtrl1' + }); + }]) + + .controller('MyCtrl1', ['$scope', function($scope) { + + }]); \ No newline at end of file diff --git a/app/components/view2/view2.html b/app/components/view2/view2.html new file mode 100644 index 0000000000..b6503ee11a --- /dev/null +++ b/app/components/view2/view2.html @@ -0,0 +1,5 @@ +

This is the partial for view 2.

+

+ Showing of 'interpolate' filter: + {{ 'Current version is v%VERSION%.' | interpolate }} +

diff --git a/app/components/view2/view2.js b/app/components/view2/view2.js new file mode 100644 index 0000000000..b0a4cee295 --- /dev/null +++ b/app/components/view2/view2.js @@ -0,0 +1,13 @@ +'use strict'; + +angular.module('view2', []) + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/view2', { + templateUrl: 'components/view2/view2.html', + controller: 'MyCtrl2' + }); + }]) + + .controller('MyCtrl2', ['$scope', function($scope) { + + }]); \ No newline at end of file diff --git a/test/unit/view1Spec.js b/test/unit/view1Spec.js new file mode 100644 index 0000000000..7d3ffa918a --- /dev/null +++ b/test/unit/view1Spec.js @@ -0,0 +1,19 @@ +'use strict'; + +/* jasmine specs for the view1 module go here */ + +describe('view1 module', function(){ + var scope, ctrl; + + beforeEach(angular.mock.module('myApp')); + + beforeEach(inject(function($rootScope, $controller){ + scope = $rootScope.$new(); + ctrl = $controller('MyCtrl1', { $scope: scope }); + })); + + it('should ....', function() { + expect(ctrl).toBeDefined(); + }); + +}); diff --git a/test/unit/view2Spec.js b/test/unit/view2Spec.js new file mode 100644 index 0000000000..071184797c --- /dev/null +++ b/test/unit/view2Spec.js @@ -0,0 +1,18 @@ +'use strict'; + +/* jasmine specs for the view2 module go here */ + +describe('view2 module', function(){ + var scope, ctrl; + + beforeEach(angular.mock.module('myApp')); + + beforeEach(inject(function($rootScope, $controller){ + scope = $rootScope.$new(); + ctrl = $controller('MyCtrl2', { $scope: scope }); + })); + + it('should ....', function() { + expect(ctrl).toBeDefined(); + }); +});