refact(*): further architectural improvements

Author: petebacondarwin

.jshintrc

@@ -1,6 +1,13 @@
 {
   "globalstrict": true,
   "globals": {
-    "angular": false
+    "angular": false,
+    "describe": false,
+    "it": false,
+    "expect": false,
+    "beforeEach": false,
+    "afterEach": false,
+    "module": false,
+    "inject": false
   }
 }

.travis.yml

@@ -10,5 +10,5 @@ before_script:
   - sleep 1 # give server time to start
 
 script:
-  - node_modules/.bin/karma start test/karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox
-  - node_modules/.bin/protractor test/protractor-conf.js --browser=firefox
+  - node_modules/.bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox
+  - node_modules/.bin/protractor e2e-tests/protractor.conf.js --browser=firefox

README.md

@@ -70,39 +70,33 @@ Now browse to the app at `http://localhost:8000/app/index.html`.
 
 ## Directory Layout
 
-    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
-        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
-
+```
+app/                    --> all of the source files for the application
+  app.css               --> default stylesheet
+  components/           --> all app specific modules
+    version/              --> version related components
+      version.js                 --> version module declaration and basic "version" value service
+      version_test.js            --> "version" value service tests
+      version-directive.js       --> custom directive that returns the current app version
+      version-directive_test.js  --> version directive tests
+      interpolate-filter.js      --> custom interpolation filter
+      interpolate-filter_test.js --> interpolate filter tests
+  view1/                --> the view1 view template and logic
+    view1.html            --> the partial template
+    view1.js              --> the controller logic
+    view1_test.js         --> tests of the controller
+  view2/                --> the view2 view template and logic
+    view2.html            --> the partial template
+    view2.js              --> the controller logic
+    view2_test.js         --> tests of the controller
+  app.js                --> main application module
+  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
+karma.conf.js         --> config file for running unit tests with Karma
+e2e-tests/            --> end-to-end tests
+  protractor-conf.js    --> Protractor config file
+  scenarios.js          --> end-to-end scenarios to be run by Protractor
+```
 
 ## Testing
 
@@ -114,8 +108,8 @@ The angular-seed app comes preconfigured with unit tests. These are written in
 [Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma
 configuration file to run them.
 
-* the configuration is found at `test/karma.conf.js`
-* the unit tests are found in `test/unit/`.
+* the configuration is found at `karma.conf.js`
+* the unit tests are found in next to the code they are testing and are named as `..._test.js`.
 
 The easiest way to run the unit tests is to use the supplied npm script:
 
@@ -143,8 +137,8 @@ The angular-seed app comes with end-to-end tests, again written in [Jasmine][jas
 are run with the [Protractor][protractor] End-to-End test runner.  It uses native events and has
 special features for Angular applications.
 
-* the configuration is found at `test/protractor-conf.js`
-* the end-to-end tests are found in `test/e2e/`
+* the configuration is found at `e2e-tests/protractor-conf.js`
+* the end-to-end tests are found in `e2e-tests/scenarios.js`
 
 Protractor simulates interaction with our web app and verifies that the application responds
 correctly. Therefore, our web server needs to be serving up the application, so that Protractor
@@ -235,7 +229,7 @@ Then you can start your own development web server to serve static files from a
 running:
 
 ```
-http-server
+http-server -a localhost -p 8000
 ```
 
 Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just

app/assets/css/.gitkeep

@@ -0,0 +1,9 @@
+'use strict';
+
+angular.module('myApp.version.interpolate-filter', [])
+
+.filter('interpolate', ['version', function(version) {
+  return function(text) {
+    return String(text).replace(/\%VERSION\%/mg, version);
+  };
+}]);

app/assets/css/app.css

@@ -1,9 +1,9 @@
 'use strict';
 
-describe('version filter', function() {
+describe('myApp.version module', function() {
   beforeEach(module('myApp.version'));
 
-  describe('interpolate', function() {
+  describe('interpolate filter', function() {
     beforeEach(module(function($provide) {
       $provide.value('version', 'TEST_VER');
     }));

app/assets/img/.gitkeep

@@ -1,8 +1,9 @@
 'use strict';
 
-angular.module('myApp.version').
-  directive('appVersion', ['version', function(version) {
-    return function(scope, elm, attrs) {
-      elm.text(version);
-    };
-  }]);
+angular.module('myApp.version.version-directive', [])
+
+.directive('appVersion', ['version', function(version) {
+  return function(scope, elm, attrs) {
+    elm.text(version);
+  };
+}]);

app/components/directives/appVersion.js

@@ -1,9 +1,9 @@
 'use strict';
 
-describe('version directives', function() {
+describe('myApp.version module', function() {
   beforeEach(module('myApp.version'));
 
-  describe('app-version', function() {
+  describe('app-version directive', function() {
     it('should print current version', function() {
       module(function($provide) {
         $provide.value('version', 'TEST_VER');

app/components/filters/interpolate.js

@@ -1,4 +1,8 @@
 'use strict';
 
-angular.module('myApp.version', []).
-  value('version', '0.1');
+angular.module('myApp.version', [
+  'myApp.version.interpolate-filter',
+  'myApp.version.version-directive'
+])
+
+.value('version', '0.1');

app/components/services/appVersionService.js

@@ -1,9 +1,9 @@
 'use strict';
 
-describe('version service', function() {
+describe('myApp.version module', function() {
   beforeEach(module('myApp.version'));
 
-  describe('version', function() {
+  describe('version service', function() {
     it('should return current version', inject(function(version) {
       expect(version).toEqual('0.1');
     }));

app/components/version/interpolate-filter.js

@@ -30,18 +30,19 @@
     $script([
       'bower_components/angular/angular.js',
       'bower_components/angular-route/angular-route.js',
-      'js/app.js',
-      'js/services.js',
-      'js/controllers.js',
-      'js/filters.js',
-      'js/directives.js'
+      'app.js',
+      'view1/view1.js',
+      'view2/view2.js',
+      'components/version/version.js',
+      'components/version/version-directive.js',
+      'components/version/interpolate-filter.js'
     ], function() {
       // when all is done, execute bootstrap angular application
       angular.bootstrap(document, ['myApp']);
     });
   </script>
   <title>My AngularJS App</title>
-  <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="app.css">
 </head>
 <body ng-cloak>
   <ul class="menu">

app/components/version/version-filter_test.js renamed to app/components/version/interpolate-filter_test.js

@@ -11,7 +11,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
   <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
-  <link rel="stylesheet" href="css/app.css"/>
+  <link rel="stylesheet" href="app.css"/>
   <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>
 <body>
@@ -38,6 +38,6 @@
   <script src="view2/view2.js"></script>
   <script src="components/version/version.js"></script>
   <script src="components/version/version-directive.js"></script>
-  <script src="components/version/version-filter.js"></script>
+  <script src="components/version/interpolate-filter.js"></script>
 </body>
 </html>

app/components/version/version-directive.js

@@ -1,12 +1,14 @@
 'use strict';
 
 angular.module('myApp.view1', ['ngRoute'])
-  .config(['$routeProvider', function($routeProvider) {
-    $routeProvider.when('/view1', {
-      templateUrl: 'view1/view1.html', 
-      controller: 'View1Ctrl'
-    });
-  }])
-  .controller('View1Ctrl', [function() {
-
-  }]);
+
+.config(['$routeProvider', function($routeProvider) {
+  $routeProvider.when('/view1', {
+    templateUrl: 'view1/view1.html',
+    controller: 'View1Ctrl'
+  });
+}])
+
+.controller('View1Ctrl', [function() {
+
+}]);

app/components/version/version-directive_test.js

@@ -1,12 +1,16 @@
 'use strict';
 
-describe('view1 controller', function(){
+describe('myApp.view1 module', function() {
+
   beforeEach(module('myApp.view1'));
 
-  it('should ....', inject(function($controller) {
-    //spec body
-    var view1Ctrl = $controller('View1Ctrl');
-    expect(view1Ctrl).toBeDefined();
-  }));
+  describe('view1 controller', function(){
+
+    it('should ....', inject(function($controller) {
+      //spec body
+      var view1Ctrl = $controller('View1Ctrl');
+      expect(view1Ctrl).toBeDefined();
+    }));
 
-});
+  });
+});