feat(gen): Support for server rendering and Angular's HTML5 mode

Server now uses EJS rendering to serve html views. New structure should allow Jade support later on. Additionally, HTML5 mode is now supported. All un-specified server routes now redirect to index so the angular routing system handles them. BREAKING CHANGE: angular-fullstack:route and angular-fullstack:view will now generate views and routes in the views/partials folder. For existing projects: Please install generator-angular and use it's subgenerators for creating routes and views. They are exactly the same as the generators that you have been using. Example usage: yo angular:route helloworld. For New projects: Continue to use angular-fullstack route and view subgenerators. The reason for this change in folder structure was to support server page rendering. Closes #18, #17
angular-fullstack · Nov 22, 2013 · 5ccdeb7 · 5ccdeb7
1 parent fce23c0
commit 5ccdeb7
Show file tree

Hide file tree

Showing 15 changed files with 103 additions and 52 deletions.
diff --git a/app/index.js b/app/index.js
@@ -241,20 +241,26 @@ Generator.prototype.bootstrapJS = function bootstrapJS() {
   }
 
   // Wire Twitter Bootstrap plugins
-  this.indexFile = this.appendScripts(this.indexFile, 'scripts/plugins.js', [
-    'bower_components/sass-bootstrap/js/affix.js',
-    'bower_components/sass-bootstrap/js/alert.js',
-    'bower_components/sass-bootstrap/js/button.js',
-    'bower_components/sass-bootstrap/js/carousel.js',
-    'bower_components/sass-bootstrap/js/transition.js',
-    'bower_components/sass-bootstrap/js/collapse.js',
-    'bower_components/sass-bootstrap/js/dropdown.js',
-    'bower_components/sass-bootstrap/js/modal.js',
-    'bower_components/sass-bootstrap/js/scrollspy.js',
-    'bower_components/sass-bootstrap/js/tab.js',
-    'bower_components/sass-bootstrap/js/tooltip.js',
-    'bower_components/sass-bootstrap/js/popover.js'
-  ]);
+  this.indexFile = this.appendFiles({
+    html: this.indexFile,
+    fileType: 'js',
+    optimizedPath: 'scripts/plugins.js',
+    sourceFileList: [
+      'bower_components/sass-bootstrap/js/affix.js',
+      'bower_components/sass-bootstrap/js/alert.js',
+      'bower_components/sass-bootstrap/js/button.js',
+      'bower_components/sass-bootstrap/js/carousel.js',
+      'bower_components/sass-bootstrap/js/transition.js',
+      'bower_components/sass-bootstrap/js/collapse.js',
+      'bower_components/sass-bootstrap/js/dropdown.js',
+      'bower_components/sass-bootstrap/js/modal.js',
+      'bower_components/sass-bootstrap/js/scrollspy.js',
+      'bower_components/sass-bootstrap/js/tab.js',
+      'bower_components/sass-bootstrap/js/tooltip.js',
+      'bower_components/sass-bootstrap/js/popover.js'
+    ],
+    searchPath: 'app'
+  });  
 };
 
 Generator.prototype.extraModules = function extraModules() {
@@ -274,10 +280,15 @@ Generator.prototype.extraModules = function extraModules() {
   if (this.routeModule) {
     modules.push('bower_components/angular-route/angular-route.js');
   }
-
+  
   if (modules.length) {
-    this.indexFile = this.appendScripts(this.indexFile, 'scripts/modules.js',
-        modules);
+    this.indexFile = this.appendFiles({
+      html: this.indexFile,
+      fileType: 'js',
+      optimizedPath: 'scripts/modules.js',
+      sourceFileList: modules,
+      searchPath: 'app'
+    });
   }
 };
 
@@ -292,7 +303,7 @@ Generator.prototype.appJs = function appJs() {
 };
 
 Generator.prototype.createIndexHtml = function createIndexHtml() {
-  this.write(path.join(this.appPath, 'index.html'), this.indexFile);
+  this.write(path.join(this.appPath, 'views', 'index.html'), this.indexFile);
 };
 
 Generator.prototype.packageFiles = function () {
@@ -304,6 +315,7 @@ Generator.prototype.packageFiles = function () {
 Generator.prototype.serverFiles = function () {
   this.template('../../templates/express/server.js', 'server.js');
   this.template('../../templates/express/api.js', 'lib/controllers/api.js');
+  this.template('../../templates/express/index.js', 'lib/controllers/index.js');
 };
 
 Generator.prototype.mongoFiles = function () {

diff --git a/route/index.js b/route/index.js
@@ -22,7 +22,7 @@ Generator.prototype.rewriteAppJs = function () {
     ),
     needle: '.otherwise',
     splicable: [
-      "  templateUrl: 'views/" + this.name + ".html'" + (coffee ? "" : "," ),
+      "  templateUrl: 'views/partials/" + this.name + ".html'" + (coffee ? "" : "," ),
       "  controller: '" + this.classedName + "Ctrl'"
     ]
   };

diff --git a/templates/coffeescript-min/app.coffee b/templates/coffeescript-min/app.coffee
@@ -1,11 +1,12 @@
 'use strict'
 
 angular.module('<%= scriptAppName %>', [<%= angularModules %>])
-  .config ['$routeProvider', ($routeProvider) ->
+  .config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
     $routeProvider
       .when '/',
         templateUrl: 'views/main.html'
         controller: 'MainCtrl'
       .otherwise
         redirectTo: '/'
+    $locationProvider.html5Mode(true)
   ]
diff --git a/templates/coffeescript/app.coffee b/templates/coffeescript/app.coffee
@@ -1,10 +1,11 @@
 'use strict'
 
 angular.module('<%= scriptAppName %>', [<%= angularModules %>])
-  .config ($routeProvider) ->
+  .config ($routeProvider, $locationProvider) ->
     $routeProvider
       .when '/',
         templateUrl: 'views/main.html'
         controller: 'MainCtrl'
       .otherwise
         redirectTo: '/'
+    $locationProvider.html5Mode(true)
diff --git a/templates/common/Gruntfile.js b/templates/common/Gruntfile.js
@@ -15,7 +15,8 @@ module.exports = function (grunt) {
     yeoman: {
       // configurable paths
       app: require('./bower.json').appPath || 'app',
-      dist: 'public'
+      dist: 'public',
+      views: 'views'
     },
     express: {
         options: {
@@ -53,7 +54,7 @@ module.exports = function (grunt) {
       },<% } %>
       livereload: {
         files: [
-          '<%%= yeoman.app %>/{,*//*}*.html',
+          '<%%= yeoman.app %>/<%%= yeoman.views %>/{,*//*}*.html',
           '{.tmp,<%%= yeoman.app %>}/styles/{,*//*}*.css',
           '{.tmp,<%%= yeoman.app %>}/scripts/{,*//*}*.js',
           '<%%= yeoman.app %>/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}',
@@ -98,6 +99,7 @@ module.exports = function (grunt) {
           dot: true,
           src: [
             '.tmp',
+            '<%%= yeoman.views %>/*',
             '<%%= yeoman.dist %>/*',
             '!<%%= yeoman.dist %>/.git*'
           ]
@@ -188,13 +190,13 @@ module.exports = function (grunt) {
       }
     },
     useminPrepare: {
-      html: '<%%= yeoman.app %>/index.html',
+      html: '<%%= yeoman.app %>/<%%= yeoman.views %>/index.html',
       options: {
         dest: '<%%= yeoman.dist %>'
       }
     },
     usemin: {
-      html: ['<%%= yeoman.dist %>/{,*/}*.html'],
+      html: ['<%%= yeoman.views %>/{,*/}*.html'],
       css: ['<%%= yeoman.dist %>/styles/{,*/}*.css'],
       options: {
         assetsDirs: ['<%%= yeoman.dist %>']
@@ -248,9 +250,9 @@ module.exports = function (grunt) {
         },
         files: [{
           expand: true,
-          cwd: '<%%= yeoman.app %>',
-          src: ['*.html', 'views/*.html'],
-          dest: '<%%= yeoman.dist %>'
+          cwd: '<%%= yeoman.app %>/<%%= yeoman.views %>',
+          src: ['*.html', 'partials/*.html'],
+          dest: '<%%= yeoman.views %>'
         }]
       }
     },
@@ -284,7 +286,8 @@ module.exports = function (grunt) {
           dot: true,
           dest: 'heroku',
           src: [
-            '<%%= yeoman.dist %>/**'
+            '<%%= yeoman.dist %>/**',
+            '<%= yeoman.views %>/**'
           ]
         }, {
           expand: true,
@@ -331,7 +334,7 @@ module.exports = function (grunt) {
     },
     cdnify: {
       dist: {
-        html: ['<%%= yeoman.dist %>/*.html']
+        html: ['<%%= yeoman.views %>/*.html']
       }
     },
     ngmin: {

diff --git a/templates/common/_package.json b/templates/common/_package.json
@@ -2,8 +2,9 @@
   "name": "<%= _.slugify(appname) %>",
   "version": "0.0.0",
   "dependencies": {
-    "express": "~3.4.3"<% if (mongo) { %>,
-    "mongoose": "~3.5.5",    
+    "express": "~3.4.3",
+    "ejs": "~0.8.4"<% if (mongo) { %>,
+    "mongoose": "~3.5.5",
     "async": "~0.2.9"<% } %>
   },
   "devDependencies": {

diff --git a/templates/common/index.html b/templates/common/index.html
@@ -6,6 +6,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <base href="/"/>
     <title></title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">

diff --git a/templates/common/root/app/404.html → templates/common/root/app/views/404.html b/templates/common/root/app/404.html → templates/common/root/app/views/404.html
diff --git a/templates/common/root/app/views/main.html → .../common/root/app/views/partials/main.html b/templates/common/root/app/views/main.html → .../common/root/app/views/partials/main.html
diff --git a/templates/express/index.js b/templates/express/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var path = require('path');
+
+exports.partials = function(req, res) {
+  var requestedView = path.join('./', req.url);
+  res.render(requestedView, function(err, html) {
+    if(err) {
+      res.render('404');
+    } else {
+      res.send(html);
+    }
+  });
+};
+
+exports.index = function(req, res) {
+  res.render('index');
+};
diff --git a/templates/express/server.js b/templates/express/server.js
@@ -19,32 +19,44 @@ fs.readdirSync(modelsPath).forEach(function (file) {
 // Populate empty DB with dummy data
 require('./lib/db/dummydata');
 <% } %>
-// Controllers
-var api = require('./lib/controllers/api');
 
 // Express Configuration
-app.configure(function(){
-	app.use(express.logger('dev'));
-	app.use(express.bodyParser());
-	app.use(express.methodOverride());
-	app.use(app.router);
-});
-
 app.configure('development', function(){
   app.use(require('connect-livereload')());
   app.use(express.static(path.join(__dirname, '.tmp')));
   app.use(express.static(path.join(__dirname, 'app')));
   app.use(express.errorHandler());
+  app.set('views', __dirname + '/app/views');
 });
 
 app.configure('production', function(){
-  app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
+  app.use(express.favicon(path.join(__dirname, 'public', 'favicon.ico')));
   app.use(express.static(path.join(__dirname, 'public')));
+  app.set('views', __dirname + '/views');
 });
 
-// Routes
+app.configure(function(){
+  app.engine('html', require('ejs').renderFile);
+  app.set('view engine', 'html');
+	app.use(express.logger('dev'));
+	app.use(express.bodyParser());
+	app.use(express.methodOverride());
+
+  // Router needs to be last
+	app.use(app.router);
+});
+
+// Controllers
+var api = require('./lib/controllers/api'),
+    controllers = require('./lib/controllers');
+
+// Server Routes
 app.get('/api/awesomeThings', api.awesomeThings);
 
+// Angular Routes
+app.get('/partials/*', controllers.partials);
+app.get('/*', controllers.index);
+
 // Start server
 var port = process.env.PORT || 3000;
 app.listen(port, function () {

diff --git a/templates/javascript-min/app.js b/templates/javascript-min/app.js
@@ -1,13 +1,14 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>', [<%= angularModules %>])
-  .config(['$routeProvider', function ($routeProvider) {
+  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
     $routeProvider
       .when('/', {
-        templateUrl: 'views/main.html',
+        templateUrl: 'partials/main.html',
         controller: 'MainCtrl'
       })
       .otherwise({
         redirectTo: '/'
       });
+    $locationProvider.html5Mode(true);
   }]);
diff --git a/templates/javascript/app.js b/templates/javascript/app.js
@@ -1,13 +1,14 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>', [<%= angularModules %>])
-  .config(function ($routeProvider) {
+  .config(function ($routeProvider, $locationProvider) {
     $routeProvider
       .when('/', {
-        templateUrl: 'views/main.html',
+        templateUrl: 'partials/main.html',
         controller: 'MainCtrl'
       })
       .otherwise({
         redirectTo: '/'
       });
+    $locationProvider.html5Mode(true);
   });
diff --git a/test/test-file-creation.js b/test/test-file-creation.js
@@ -72,7 +72,7 @@ describe('Angular generator', function () {
                     'server.js',
                     ['bower.json', /"name":\s+"temp"/],
                     'app/scripts/app.js',
-                    'app/index.html',
+                    'app/views/index.html',
                     'app/scripts/controllers/main.js',
                     'test/spec/controllers/main.js'
                     ];
@@ -100,7 +100,7 @@ describe('Angular generator', function () {
                     'package.json',
                     ['bower.json', /"name":\s+"temp"/],
                     'app/scripts/app.coffee',
-                    'app/index.html',
+                    'app/views/index.html',
                     'app/scripts/controllers/main.coffee',
                     'test/spec/controllers/main.coffee'
                     ];
@@ -221,7 +221,7 @@ describe('Angular generator', function () {
       angular.run([], function (){
         angularView.run([], function () {
           helpers.assertFiles([
-            ['app/views/foo.html']
+            ['app/views/partials/foo.html']
           ]);
           done();
         });
@@ -241,7 +241,7 @@ describe('Angular generator', function () {
       angular.run([], function (){
         angularView.run([], function () {
           helpers.assertFiles([
-            ['app/views/foo/bar.html']
+            ['app/views/partials/foo/bar.html']
           ]);
           done();
         });

diff --git a/view/index.js b/view/index.js
@@ -19,5 +19,5 @@ var Generator = module.exports = function Generator() {
 util.inherits(Generator, yeoman.generators.NamedBase);
 
 Generator.prototype.createViewFiles = function createViewFiles() {
-  this.template('common/view.html', path.join(this.env.options.appPath, 'views', this.name + '.html'));
+  this.template('common/view.html', path.join(this.env.options.appPath, 'views', 'partials', this.name + '.html'));
 };