karma-html2js-requirejs-preprocessor

Preprocessor for converting HTML files to AngularJS templates.

Note: If you are looking for a general preprocessor that is not tight to Angular, check out karma-html2js-preprocessor.

Installation

The easiest way is to keep karma-ng-html2js-preprocessor as a devDependency in your package.json.

1{
2  "devDependencies": {
3    "karma": "~0.10",
4    "karma-ng-html2js-preprocessor": "~0.1"
5  }
6}

You can simple do it by:

1npm install karma-ng-html2js-preprocessor --save-dev

Configuration

1// karma.conf.js
2module.exports = function(config) {
3  config.set({
4    preprocessors: {
5      '**/*.html': ['ng-html2js']
6    },
7
8    files: [
9      '*.js',
10      '*.html',
11      // if you wanna load template files in nested directories, you must use this
12      '**/*.html'
13    ],
14
15    ngHtml2JsPreprocessor: {
16      // strip this from the file path
17      stripPrefix: 'public/',
18      // prepend this to the
19      prependPrefix: 'served/',
20
21      // or define a custom transform function
22      cacheIdFromPath: function(filepath) {
23        return cacheId;
24      },
25
26      // setting this option will create only a single module that contains templates
27      // from all the files, so you can load them all with module('foo')
28      moduleName: 'foo'
29    }
30  });
31};

How does it work ?

This preprocessor converts HTML files into JS strings and generates Angular modules. These modules, when loaded, puts these HTML files into the $templateCache and therefore Angular won't try to fetch them from the server.

For instance this template.html...

1<div>something</div>

... will be served as template.html.js:

1angular.module('template.html', []).config(function($templateCache) {
2  $templateCache.put('template.html', '<div>something</div>');
3});

See the ng-directive-testing for a complete example.

---

For more information on Karma see the homepage.