CODEWITHSUNDEEP
javascriptangularjscachinggruntjsbrowserify
Spearfisher
Spearfisher

Reputation: 8783

Use angular template cache with browserify

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?

Upvotes: 10

Views: 3302

Answers (2)

Nicolas Zozol
Nicolas Zozol

Reputation: 7038

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

Upvotes: 3

Jakub Złoczewski
Jakub Złoczewski

Reputation: 451

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>

Upvotes: 0

Related Questions