release(0.0.2): working module generation, various minor bug fixes

README.md

@@ -3,12 +3,68 @@
 
 [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 > Yeoman Generator for AngularJS webapps and modules
+> Generates AngularJS webapps and stand alone modules. Uses gulp, follows the Google Recommendation for AngularJS Project File Structure, and provides sub generators, to automate development beyond the initial project scaffolding, generating routes, controllers and other AngularJS objects and tests.
 
 ### Under construction
 
-Currently release 0.0.1, still needs work, more information available in the gitter channel :  [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+Currently release 0.0.2, still needs work, more information available in the gitter channel :  [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-Version 0.0.2 should be a lot more stable, planned for the end of this week ( Feb 15 ). This is a fork of, and meant to continue/replace:  [generator-angular-webapp](https://github.com/kosz/generator-angular-webapp).
+Version 0.0.3 planned for the end of this week ( Feb 15 ). New releases on a weekly basis. This is a fork of, and meant to continue/replace:  [generator-angular-webapp](https://github.com/kosz/generator-angular-webapp).
+
+### Installation
+
+```
+npm install -g generator-modular
+```
+
+Make sure all prerequisites are installed and up to date : gulp, npm, yeoman, bower, git.
+
+### Scaffolding a new project
+
+Create a new dir for your project and cd into it.
+```
+mkdir myProject && cd myProject
+```
+
+Run the main generator.
+```
+yo modular
+```
+
+Start the live reload server with gulp
+```
+gulp serve
+```
+
+Start the karma runner to run jasmine tests. 
+```
+gulp test:auto
+```
+
+### Generators
+
+#### Available: 
+
+- yo modular 
+- yo modular:route [nameOfYourRoute]
+- yo modular:controller [nameOfYourController]
+- yo modular:service [nameOfYourService]
+- yo modular:template [nameOfYourHtmlTemplate]
+
+#### Planned
+
+- yo modular:directive
+- yo modular:filter
+- yo modular:resource
+
+many others... 
+
+### Prerequisites
+
+- gulp `npm install -g gulp`
+- npm / node 
+- yeoman `npm install -g yo`
+- bower `npm install -g bower`
 
 ## License
 

generators/app/index.js

@@ -27,8 +27,8 @@ module.exports = generators.Base.extend({
       ],
       filter: function (val) {
         var filterMap = {
-          "Angular Web App": 'Webapp',
-          "Module to be included in other Angular Web Apps": 'Module'
+          "Angular Web App": 'app',
+          "Module to be included in other Web Apps": 'module'
         }
         return filterMap[val];
       },
@@ -121,11 +121,13 @@ module.exports = generators.Base.extend({
     this.template('karma.conf.js', 'karma.conf.js');
     this.template('editorconfig', '.editorconfig');
 
+    this.template('src/app/vendor.scss', '.tmp/serve/' + this.projectType + '/vendor.css'); // TODO: vendor.css confusion
+
   },
 
   scaffoldModule: function () {
 
-    if ( this.projectType === "Webapp" ) { return; }
+    if ( this.projectType === "app" ) { return; }
 
     this.template('src/demo/demo.js', 'src/demo/demo.js');
     this.template('src/module/module.js', 'src/module/module.js');
@@ -148,7 +150,7 @@ module.exports = generators.Base.extend({
 
   scaffoldApp: function () {
 
-    if ( this.projectType === "Module" ) { return; }
+    if ( this.projectType === "module" ) { return; }
 
     this.template('src/app/app.js', 'src/app/app.js');
     this.template('src/index.html', 'src/index.html');
@@ -171,7 +173,6 @@ module.exports = generators.Base.extend({
     this.template('src/routes/main/footer.html', 'src/routes/main/footer.html');
 
     this.template('src/app/app.scss', 'src/app/app.scss');
-    this.template('src/app/vendor.scss', '.tmp/serve/app/vendor.css'); // TODO: vendor.css confusion
 
     //
     // example route /exampleRoute
@@ -193,15 +194,17 @@ module.exports = generators.Base.extend({
     this.installDependencies({
       callback: function () {
 //        this.spawnCommand('gulp', ['index','ngdocs']).on('close', function (code) { // TODO
-          console.log( chalk.bold.green('Finished setting up ' + name + ' run ' + chalk.yellow('gulp serve') + ' to get started\n'));
+          console.log( chalk.bold.green('\nFinished setting up ' + name + ' run ' + chalk.yellow('gulp serve') + ' to get started\n'));
           console.log(chalk.bold.yellow('docs :') + chalk.red(' https://github.com/kosz/generator-modular') + '\n' );
 
-          console.log(chalk.bold.yellow('gulp :'));
+          console.log(chalk.bold.yellow('gulp commands:\n'));
 
           console.log(chalk.yellow(' gulp serve') + chalk.green(' - opens up a live reload server, and runs the ') + chalk.cyan('watchers'));
+          console.log(chalk.yellow(' gulp serve:dist') + chalk.green(' - serves a production build, with minified/concatenated files') + chalk.cyan('watchers'));
           console.log(chalk.yellow(' gulp') + chalk.green(' - runs the ') + chalk.cyan('watchers') + chalk.green(' but does not open a server'));
-          console.log(chalk.yellow(' gulp test') + chalk.green(' - runs the jasmine spec suite') + chalk.gray(' alternate command: karma start karma.conf.js'));
-          console.log(chalk.yellow(' gulp ngdocs-serve') + chalk.green(' - compiles ngDocs from your comments, and opens up a server, serving the documentation page\n'));
+          console.log(chalk.yellow(' gulp test') + chalk.green(' - runs the jasmine test suite'));
+          console.log(chalk.yellow(' gulp test:auto') + chalk.green(' - runs a watcher that executes the test suite on every change'));
+          console.log(chalk.yellow(' gulp serve:ngdocs') + chalk.green(' - compiles ngDocs from your comments, and opens up a server, serving the documentation page\n'));
 
 //        });
       }.bind(this)

generators/app/templates/gitignore

@@ -2,4 +2,6 @@
 node_modules
 bower_components
 dist
-src/ng-docs
+ngDocs
+.DS_Store
+.tmp

generators/app/templates/gulp/build.js

@@ -10,6 +10,8 @@ var $ = require('gulp-load-plugins')({
 
 gulp.task('partials', function () {
   return gulp.src([
+    '!' + paths.src + '/index.html',
+    '!' + paths.tmp + '/serve/index.html',
     paths.src + '/**/*.html',
     paths.tmp + '/**/*.html'
   ])

generators/app/templates/gulp/inject.js

@@ -12,6 +12,7 @@ gulp.task('inject', ['inject-css'], function () {
 
   var injectStyles = gulp.src([
     paths.tmp + '/serve/**/*.css',
+    '!' + paths.tmp + '/serve/module/vendor.css',
     '!' + paths.tmp + '/serve/app/vendor.css'
   ], { read: false });
 
@@ -44,6 +45,6 @@ gulp.task('inject-css', ['styles'],  function () {
   var target = gulp.src('./.tmp/serve/index.html');
   var sources = gulp.src(['./tmp/**/*.css'], {read: false});
   target.pipe($.inject(sources, {ignorePath: 'src', addRootSlash: false }))
-  .pipe(gulp.dest('./tmp/serve'));
+  .pipe(gulp.dest('./.tmp/serve'));
 
 });

generators/app/templates/gulp/ngdocs.js

@@ -11,7 +11,7 @@ gulp.task('ngdocs-build', function () {
     //scripts: ['src/app.js'],
     html5Mode: true,
     startPage: '/api',
-    title: 'webapp',
+    title: '<%= config.get("name") %>',
     image: "http://swiip.github.io/yeoman-angular/slides/img/yeoman-009.png",
     imageLink: "/api",
     titleLink: "http://localhost:3000"

generators/app/templates/gulp/server.js

@@ -8,7 +8,8 @@ var util = require('util');
 
 var browserSync = require('browser-sync');
 
-var middleware = require('./proxy');
+var middleware = require('./proxy'); //TODO: residue from huge refactor
+middleware.push(require('connect-history-api-fallback'));
 
 function browserSyncInit(baseDir, files, browser) {
   browser = browser === undefined ? 'default' : browser;

generators/app/templates/gulp/styles.js

@@ -53,5 +53,5 @@ gulp.task('styles', function () {
   return gulp.src(src)
       .pipe($.sass())
       .pipe($.concat('css' + '.css'))
-      .pipe(gulp.dest(paths.tmp + '/serve/app/'));
+      .pipe(gulp.dest(paths.tmp + '/serve/<%= projectType %>/'));
 });

generators/app/templates/package.json

@@ -44,6 +44,7 @@
     "protractor": "~1.4.0",
     "gulp-concat": "^2.4.3",
     "uglify-save-license": "~0.4.1",
+    "connect-history-api-fallback": "0.0.5",
     "gulp-ngdocs": "^0.2.10"
   }
 }

generators/app/templates/src/demo/footer.html

@@ -1,7 +1,7 @@
 <footer class="footer">
     <p style="text-align: center;" class="container">Built with
-    <a href="https://github.com/kosz/generator-angular-webapp">generator-angular-webapp v0.1.5</a> |
-    <a href="https://github.com/kosz/generator-angular-webapp/issues?state=open">Issues</a> |||
+    <a href="https://github.com/kosz/generator-modular">generator-angular-webapp v0.1.5</a> |
+    <a href="https://github.com/kosz/generator-modular/issues?state=open">Issues</a> |||
     <a href="http://localhost:4000/" title="Make sure 'gulp ngdocs-serve' is running">ngDocs</a>
     </p>
 </footer>

generators/app/templates/src/demo/index.html

@@ -1,23 +1,60 @@
-<!DOCTYPE html>
-<html ng-app="<%= config.get('name') %>-demo">
-<head>
-  <title><%= config.get('name') %> Demo</title>
-  <base href="/">
+<!doctype html>
+<html class="no-js" ng-app="<%= config.get('name') %>-demo">
+  <head>
+    <meta charset="utf-8">
+    <title><%= config.get('name') %></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <base href="/">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
-  <!-- bower:css -->
-  <!-- endinject -->
+    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
+    <!-- <link rel="stylesheet" href="<%= projectType %>/vendor.css"> -->
+    <!-- bower:css -->
+    <!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
+    <!-- endbower -->
+    <!-- endbuild -->
 
-  <!-- inject:css -->
-  <!-- endinject -->
+    <!-- build:css({.tmp/serve,src}) styles/<%= projectType %>.css -->
+    <!-- inject:css -->
+    <!-- css files will be automaticaly insert here -->
+    <!-- endinject -->
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
 
-  <!-- bower:js -->
-  <!-- endinject -->
-</head>
-<body>
-  <div ng-include="'demo/header.html'"></div>
-  <ng-view></ng-view>
-  <div ng-include="'demo/footer.html'"></div>
-  <!-- inject:js -->
-  <!-- endinject -->
-</body>
+    <div ng-include="'demo/header.html'"></div>
+    <ng-view></ng-view>
+    <div ng-include="'demo/footer.html'"></div>
+<% if(false) { //TODO %>
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X');ga('send','pageview');
+    </script>
+<% } %>
+    <!-- build:js(src) scripts/vendor.js -->
+    <!-- bower:js -->
+    <!-- run `gulp wiredep` to automaticaly populate bower script dependencies -->
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
+    <!-- inject:js -->
+    <!-- js files will be automaticaly insert here -->
+    <!-- endinject -->
+
+    <!-- inject:partials -->
+    <!-- angular templates will be automatically converted in js and inserted here -->
+    <!-- endinject -->
+    <!-- endbuild -->
+
+  </body>
 </html>

generators/app/templates/src/index.html

@@ -9,13 +9,13 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
     <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
-    <!-- <link rel="stylesheet" href="app/vendor.css"> -->
+    <!-- <link rel="stylesheet" href="<%= projectType %>/vendor.css"> -->
     <!-- bower:css -->
     <!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
     <!-- endbower -->
     <!-- endbuild -->
 
-    <!-- build:css({.tmp/serve,src}) styles/app.css -->
+    <!-- build:css({.tmp/serve,src}) styles/<%= projectType %>.css -->
     <!-- inject:css -->
     <!-- css files will be automaticaly insert here -->
     <!-- endinject -->

generators/template/index.js

@@ -19,8 +19,8 @@ module.exports = generators.Base.extend({
       this.prompt({
         type    : 'input',
         name    : 'path',
-        message : 'Enter the path for this template\n  Default: ' + chalk.yellow('src/app/'), 
-        default : 'src/app/',
+        message : 'Enter the path for this template\n  Default: ' + chalk.yellow('src/<%= projectType %>/'),
+        default : 'src/<%= projectType %>/',
         store   : true
       }, function (answers) {
         this.path = answers.path;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-modular",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Cosmin Ronnin <coszmin@gmail.com>",
   "repository": {
     "type": "git",

util/generator-webapp-utils.js

@@ -1,8 +1,8 @@
-exports.sanitizePath = function (path) { 
-  
-  if ( path[path.length-1] !== "/" ) { 
-    path = path + "/"; 
-  }  
+exports.sanitizePath = function (path) {
+
+  if ( path[path.length-1] !== "/" ) {
+    path = path + "/";
+  }
   return path;
 
 };
@@ -14,6 +14,6 @@ exports.wrapAngularMockInjections = function(injections) {
   return injections;
 };
 
-exports.unwrapAngularMockInjection = function(injection) { 
+exports.unwrapAngularMockInjection = function(injection) {
   //return injection.replace('_');
 }

util/reusable-prompts.js

@@ -7,8 +7,8 @@ exports.promptPath = function () {
   this.prompt({
     type    : 'input',
     name    : 'path',
-    message : 'Enter the path for this controller\n  Default: ' + chalk.yellow('src/app/'),
-    default : 'src/app/',
+    message : 'Enter the path for this controller\n  Default: ' + chalk.yellow('src/<%= projectType %>/'),
+    default : 'src/<%= projectType %>/',
     store   : true
   }, function (answers) {