Reworked the template build to create modules of js that get loaded i…

…n at start up
yinkaf · Sep 18, 2012 · 53f1cf4 · 53f1cf4
1 parent aa56bbf
commit 53f1cf4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
-*.tpl.html.js
+*.tpl.html.js
+src/modules/templates.js
diff --git a/grunt.js b/grunt.js
@@ -25,7 +25,10 @@ module.exports = function (grunt) {
     lint:{
       files:['grunt.js', '<config:src.js>', '<config:test.js>']
     },
-    html2js: { tpl: '<config:src.tpl>' },
+    html2js: {
+      src: ['<config:src.tpl>'],
+      base: 'src/modules'
+    },
     concat:{
       dist:{
         src:['<banner:meta.banner>', '<config:src.js>'],
@@ -77,8 +80,8 @@ module.exports = function (grunt) {
 
   // Default task.
   grunt.registerTask('default', 'build lint test');
-  grunt.registerTask('build', 'html2js concat recess:build concatPartials index');
-  grunt.registerTask('release', 'lint test min recess:min concatPartials index');
+  grunt.registerTask('build', 'html2js concat recess:build index');
+  grunt.registerTask('release', 'lint test min recess:min index');
 
   // Testacular stuff
   var testacularCmd = process.platform === 'win32' ? 'testacular.cmd' : 'testacular';
@@ -114,20 +117,6 @@ module.exports = function (grunt) {
      grunt.file.copy('src/index.html', 'dist/index.html', {process:grunt.template.process});
   });
 
-  grunt.registerTask('concatPartials', 'concat partials', function () {
-    //TODO: horrible implementation, to be fixed, but this Grunt task makes sense for the AngularJS community!
-    var content = '', partials = grunt.file.expandFiles('src/modules/*/partials/**/*.tpl.html');
-    for (var i=0; i<partials.length; i++){
-      var partialFile = partials[i];
-      var partialEls = partialFile.split('/');
-      var moduleName = partialEls[2];
-      var partialName = partialEls[partialEls.length-1];
-      var partial = "<script type='text/ng-template' id='"+moduleName+"/"+partialName+"'>"+grunt.file.read(partialFile)+"</script>\n";
-      content += partial;
-    }
-    grunt.file.write('dist/partials.tpl.html', content);
-  });
-
   // Scaffolding !!
   grunt.registerTask('module', 'create new module', function () {
     var moduleName = this.args[0];
@@ -148,23 +137,36 @@ module.exports = function (grunt) {
     grunt.file.write(testPath + '/unit/' + moduleName + 'Spec.js', grunt.template.process(grunt.file.read('build/scaffolding/test.js'), tplvars));
   });
 
-  // HTML-2-JS Templates
-  var TPL = 'angular.module("<%= file %>", []).run(function($templateCache) {\n' +
-      '  $templateCache.put("<%= file %>",\n    "<%= content %>");\n' +
-      '});\n';
 
+
+  // HTML-2-JS Templates
+  var path = require('path');
+  var TPL = 'angular.module("<%= file %>", []).run(function($templateCache) {\n  $templateCache.put("<%= file %>",\n    "<%= content %>");\n});\n';
+  var templateModule = "angular.module('templates', [<%= templates %>]);";
   var escapeContent = function(content) {
     return content.replace(/"/g, '\\"').replace(/\r?\n/g, '" +\n    "');
   };
+  var normalizePath = function(p) {
+    if ( path.sep !== '/' ) {
+      p = p.replace(/\\/g, '/');
+    }
+    return p;
+  };
 
-  grunt.registerMultiTask('html2js', 'Generate js version of html template.', function() {
-    var files = grunt._watch_changed_files || grunt.file.expand(this.data);
-
+  grunt.registerTask('html2js', 'Generate js version of html template.', function() {
+    var files = grunt.file.expandFiles(grunt.config.process('html2js.src'));
+    var base = grunt.config.process('html2js.base') || '.';
+    var templates = [];
     files.forEach(function(file) {
+      var name = normalizePath(path.relative(base, file));
+      templates.push("'" + name + "'");
       grunt.file.write(file + '.js', grunt.template.process(TPL, {
-        file: file,
+        file: name,
         content: escapeContent(grunt.file.read(file))
       }));
     });
+    grunt.file.write(path.join(base,'templates.js'), grunt.template.process(templateModule, {
+      templates: templates.join(', ')
+    }));
   });
 };
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
 </head>
 
 <body ng-controller="AppCtrl">
-<div ng-include="'app/header.tpl.html'"></div>
+<div ng-include="'app/partials/header.tpl.html'"></div>
 
 <div ng-view></div>
 

diff --git a/src/modules/app/app.js b/src/modules/app/app.js
@@ -1,26 +1,26 @@
-angular.module('app', ['signin', 'dashboard', 'admin', 'services.util']);
+angular.module('app', ['signin', 'dashboard', 'admin', 'services.util', 'templates']);
 
 angular.module('app').constant('API_KEY', '4fb51e55e4b02e56a67b0b66');
 angular.module('app').constant('DB_NAME', 'ascrum');
 
 angular.module('app').config(['$routeProvider', function ($routeProvider) {
 
-  $routeProvider.when('/signin', {templateUrl:'signin/form.tpl.html', controller:'SignInCtrl'});
+  $routeProvider.when('/signin', {templateUrl:'signin/partials/form.tpl.html', controller:'SignInCtrl'});
 
-  $routeProvider.when('/dashboard', {templateUrl:'dashboard/dashboard.tpl.html', controller:'DashboardController'});
+  $routeProvider.when('/dashboard', {templateUrl:'dashboard/partials/dashboard.tpl.html', controller:'DashboardController'});
 
-  $routeProvider.when('/admin', {templateUrl:'admin/admin.tpl.html', controller:'AdminCtrl'});
+  $routeProvider.when('/admin', {templateUrl:'admin/partials/admin.tpl.html', controller:'AdminCtrl'});
 
   $routeProvider.when('/admin/projects', {
-    templateUrl:'admin/projects-list.tpl.html',
+    templateUrl:'admin/partials/projects-list.tpl.html',
     controller:'AdminProjectsCtrl',
     resolve:{
       projects:function (Projects) {
         return Projects.all();
       }}
   });
   $routeProvider.when('/admin/projects/new', {
-      templateUrl:'admin/project-edit.tpl.html',
+      templateUrl:'admin/partials/project-edit.tpl.html',
       controller:'AdminProjectEditCtrl',
       resolve:{
         project:function (Projects) {
@@ -32,7 +32,7 @@ angular.module('app').config(['$routeProvider', function ($routeProvider) {
       }}
   );
   $routeProvider.when('/admin/projects/:projectId', {
-    templateUrl:'admin/project-edit.tpl.html',
+    templateUrl:'admin/partials/project-edit.tpl.html',
     controller:'AdminProjectEditCtrl',
     resolve:{
       project:function ($route, Projects) {
@@ -45,14 +45,14 @@ angular.module('app').config(['$routeProvider', function ($routeProvider) {
   });
 
   $routeProvider.when('/admin/users', {
-    templateUrl:'admin/users-list.tpl.html',
+    templateUrl:'admin/partials/users-list.tpl.html',
     controller:'AdminUsersCtrl',
     resolve:{users:function (Users) {
       return Users.all();
     }}
   });
   $routeProvider.when('/admin/users/new', {
-    templateUrl:'admin/user-edit.tpl.html',
+    templateUrl:'admin/partials/user-edit.tpl.html',
     controller:'AdminUserEditCtrl',
     resolve:{
       user:function (Users) {
@@ -61,7 +61,7 @@ angular.module('app').config(['$routeProvider', function ($routeProvider) {
     }
   });
   $routeProvider.when('/admin/users/:userId', {
-    templateUrl:'admin/user-edit.tpl.html',
+    templateUrl:'admin/partials/user-edit.tpl.html',
     controller:'AdminUserEditCtrl',
     resolve:{
       user:function ($route, Users) {