I am building a small angular app with browserify and ui-router. As I don't want to use a server, I want to store all my templates using angular's $templateCache like this:

exports.templateCache = ["$templateCache", function($templateCache) {
  'use strict';

  $templateCache.put('partials/someState.html',
    "myHtmlCode"
  );
}];

To populate the cache, I use grunt to look into my partials folder, grab all the html and load it into the cache with grunt-angular-templates:

 ngtemplates:  {
  myApp: {
    cwd: 'dist/',
    src: 'partials/**.html',
    dest: 'src/js/templates/templates.js',
    options: {
      bootstrap:  function(module, script) {
        return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' +
          script +
          '}];'
      }
    }
  }
},

I then use browersify to bine all my js together:

browserify: {
  dist: {
    files: {
      'dist/js/app.js': [
          'src/js/templates/**',
          'src/app.js'
          ],
    }
  }
},

This is working so far but this workflow looks very unwieldy to me: I have an intermediary step where I create the templates.js file in my src directory and I have hard-coded code in my grunt file.

Is there any way to do this more elegantly? Does browserify e with built in solutions to tackle this problem?

I am building a small angular app with browserify and ui-router. As I don't want to use a server, I want to store all my templates using angular's $templateCache like this:

exports.templateCache = ["$templateCache", function($templateCache) {
  'use strict';

  $templateCache.put('partials/someState.html',
    "myHtmlCode"
  );
}];

To populate the cache, I use grunt to look into my partials folder, grab all the html and load it into the cache with grunt-angular-templates:

 ngtemplates:  {
  myApp: {
    cwd: 'dist/',
    src: 'partials/**.html',
    dest: 'src/js/templates/templates.js',
    options: {
      bootstrap:  function(module, script) {
        return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' +
          script +
          '}];'
      }
    }
  }
},

I then use browersify to bine all my js together:

browserify: {
  dist: {
    files: {
      'dist/js/app.js': [
          'src/js/templates/**',
          'src/app.js'
          ],
    }
  }
},

This is working so far but this workflow looks very unwieldy to me: I have an intermediary step where I create the templates.js file in my src directory and I have hard-coded code in my grunt file.

Is there any way to do this more elegantly? Does browserify e with built in solutions to tackle this problem?

• javascript
• angularjs
• caching
• gruntjs
• browserify

Share Improve this question Follow edited May 11, 2015 at 15:33 scniro 17k88 gold badges6666 silver badges107107 bronze badges asked Oct 22, 2014 at 7:54 SpearfisherSpearfisher 8,8032424 gold badges7474 silver badges126126 bronze badges 1

• Dealing with a similar issue. Have you found a solution yet? – Gabriel C. Troia Commented Nov 11, 2014 at 21:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

browserify-ng-html2js has been designed to resolve this problem.

Simply add in package.json :

"browserify": {
    "transform": ["browserify-ng-html2js"]
 }

And you'll see if it walks the talks :)

Try transform for browserify that give you possibility to require html file (eg. Stringify). Then you can require('yourPartial.html') as string:

$templateCache.put('yourPartialId', require('./partials/yourPartial.html'));

// html file
<div ng-include=" 'yourPartialId' "></div>