Use angular template cache with browserify

Question

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 combine 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 come with built in solutions to tackle this problem?

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

Nicolas Zozol · Accepted Answer · 2015-03-07 20:23:39Z

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 :)

answered Mar 7, 2015 at 20:23

Nicolas Zozol

7,0784 gold badges56 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elijah Over a year ago

There is also 'ngify' github, another Browserify transform. browserify().transform(require('ngify')).bundle()...

trysis Over a year ago

Both of these transforms specify the filename as the module name. This makes it hard to use as the app grows.

M J Over a year ago

ngify was just updated to allow relative paths

Jakub Złoczewski · Accepted Answer · 2015-02-04 09:10:15Z

0

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>

edited Feb 4, 2015 at 9:10

answered Feb 4, 2015 at 9:03

Jakub Złoczewski

4515 silver badges9 bronze badges

Collectives™ on Stack Overflow

Use angular template cache with browserify

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related