karma-runner/karma-ng-html2js-preprocessor


A Karma plugin. Compile AngularJS 1.x and 2.x templates to JavaScript on the fly.

License: MIT

Language: CoffeeScript


karma-ng-html2js-preprocessor

js-standard-style npm version npm downloads

Build Status Dependency Status devDependency Status

Preprocessor for converting HTML files to AngularJS 1.x and Angular 2 templates.

Note: If you are looking for a general preprocessor that is not tied 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. Just run

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

Configuration

// karma.conf.js
module.exports = function(config) {
  config.set({
    preprocessors: {
      '**/*.html': ['ng-html2js']
    },

    files: [
      '*.js',
      '*.html',
      '*.html.ext',
      // if you wanna load template files in nested directories, you must use this
      '**/*.html'
    ],

    // if you have defined plugins explicitly, add karma-ng-html2js-preprocessor
    // plugins: [
    //     <your plugins>
    //     'karma-ng-html2js-preprocessor',
    // ]

    ngHtml2JsPreprocessor: {
      // strip this from the file path
      stripPrefix: 'public/',
      stripSuffix: '.ext',
      // prepend this to the
      prependPrefix: 'served/',

      // or define a custom transform function
      // - cacheId returned is used to load template
      //   module(cacheId) will return template at filepath
      cacheIdFromPath: function(filepath) {
        // example strips 'public/' from anywhere in the path
        // module(app/templates/template.html) => app/public/templates/template.html
        var cacheId = filepath.strip('public/', '');
        return cacheId;
      },

      // - setting this option will create only a single module that contains templates
      //   from all the files, so you can load them all with module('foo')
      // - you may provide a function(htmlPath, originalPath) instead of a string
      //   if you'd like to generate modules dynamically
      //   htmlPath is a originalPath stripped and/or prepended
      //   with all provided suffixes and prefixes
      moduleName: 'foo'
    }
  })
}

Multiple module names

Use function if more than one module that contains templates is required.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      moduleName: function (htmlPath, originalPath) {
        return htmlPath.split('/')[0];
      }
    }
  })
}

If only some of the templates should be placed in the modules, return '', null or undefined for those which should not.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      moduleName: function (htmlPath, originalPath) {
        var module = htmlPath.split('/')[0];
        return module !== 'tpl' ? module : null;
      }
    }
  })
}

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...

<div>something</div>

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

angular.module('template.html', []).run(function($templateCache) {
  $templateCache.put('template.html', '<div>something</div>')
})

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


Angular2 template caching

For using this preprocessor with Angular 2 templates use angular: 2 option in the config file.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      angular: 2
    }
  })
}

The template template.html...

<div>something</div>

... will be served as template.html.js that sets the template content in the global $templateCache variable:

window.$templateCache = window.$templateCache || {}
window.$templateCache['template.html'] = '<div>something</div>';

To use the cached templates in your Angular 2 tests use the provider for the Cached XHR implementation - CACHED_TEMPLATE_PROVIDER from angular2/platform/testing/browser. The following shows the change in karma-test-shim.js to use the cached XHR and template cache in all your tests.

// karma-test-shim.js
...
System.import('angular2/testing').then(function(testing) {
  return System.import('angular2/platform/testing/browser').then(function(providers) {
    testing.setBaseTestProviders(
      providers.TEST_BROWSER_PLATFORM_PROVIDERS,
      [providers.TEST_BROWSER_APPLICATION_PROVIDERS, providers.CACHED_TEMPLATE_PROVIDER]);
  });
}).then(function() {
...

Now when your component under test uses template.html in its templateUrl the contents of the template will be used from the template cache instead of making a XHR to fetch the contents of the template. This can be useful while writing fakeAsync tests where the component can be loaded synchronously without the need to make a XHR to get the templates.


For more information on Karma see the homepage.

Project Statistics

Sourcerank 15
Repository Size 71.3 KB
Stars 268
Forks 115
Watchers 20
Open issues 78
Dependencies 15
Contributors 22
Tags 11
Created
Last updated
Last pushed

Top Contributors See all

Vojta Jina Friedel Ziegelmayer Mark Trostler Scott O'Hara Maciej Stankiewicz Levi Thomason Lukasz Bandzarewicz Sahat Yalkabov Maksim Ryzhikov Alex O'Rielly Mike Fisher Brian Lenzo vikerman Chang-Hsi Hsieh Murphy McMahon Christopher Lowenthal Pawel Kozlowski Lucas Mirelmann Chirayu Krishnappa Mike Frawley

Packages Referencing this Repo

karma-inject-html-preprocessor
A Karma plugin to inject raw HTML (including scripts, styles, etc) directly into the test runner ...
Latest release 0.1.2 - Updated - 268 stars
karma-ng-html2js-preprocessor-next
A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
Latest release 0.3.0 - Published - 268 stars
karma-ng-html2js-preprocessor-requirejs-working
A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
Latest release 0.1.0 - Published - 268 stars
karma-ng-html2js-preprocessor
A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
Latest release 1.0.0 - Updated - 268 stars

Recent Tags See all

v1.0.0 May 04, 2016
v0.2.2 April 07, 2016
v0.2.1 February 12, 2016
v0.2.0 October 08, 2015
v0.1.2 October 24, 2014
v0.1.1 October 15, 2014
v0.1.0 August 06, 2013
v0.0.4 August 05, 2013
v0.0.3 July 29, 2013
v0.0.2 July 04, 2013
v0.0.1 June 27, 2013

Interesting Forks See all

chmanie/karma-ng-jade2js-preprocessor
A Karma plugin. Compile Jade AngularJS templates to JavaScript on the fly.
JavaScript - MIT - Last pushed - 10 stars - 10 forks
abruzzi/karma-ng-html2js-preprocessor
A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
CoffeeScript - MIT - Last pushed - 2 stars - 3 forks
jbpros/karma-ng-jade2js-preprocessor
A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
CoffeeScript - MIT - Last pushed - 2 stars - 1 forks
codysims/karma-ng-haml2js-preprocessor
A Karma plugin. Compile AngularJS HAML templates to JavaScript on the fly.
CoffeeScript - MIT - Last pushed - 1 stars - 7 forks
drawyan/karma-ng-html2js-preprocessor
A Karma plugin. Compile AngularJS templates to JavaScript on the fly. Supports RequireJS
CoffeeScript - MIT - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2017-04-21 16:18:53 UTC

Login to resync this repository