refact(*): update overall application architecture to match best practices

Author: addisonedwardlee

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

app/assets/css/.gitkeep

@@ -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;
+}

app/assets/css/app.css

@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('appVersion', [])
+  .directive('appVersion', ['version', function(version) {
+    return function(scope, element, attributes, controller) {
+      element.text(version);
+    };
+  }]);

app/assets/img/.gitkeep

@@ -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);
+    };
+  }]);

app/components/directives/appVersion.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');

app/components/filters/interpolate.js

@@ -0,0 +1 @@
+<p>This is the partial for view 1.</p>

app/components/services/appVersionService.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) {
+
+  }]);

app/components/view1/view1.html

@@ -0,0 +1,5 @@
+<p>This is the partial for view 2.</p>
+<p>
+  Showing of 'interpolate' filter:
+  {{ 'Current version is v%VERSION%.' | interpolate }}
+</p>