karma-runner/karma-ng-html2js-preprocessor

Name: karma-ng-html2js-preprocessor

Owner: Karma

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

Created: 2013-02-03 20:53:52.0

Updated: 2018-01-16 13:31:58.0

Pushed: 2017-05-26 15:38:12.0

Homepage:

Size: 73

Language: CoffeeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

karma-ng-html2js-preprocessor

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

m install karma-ng-html2js-preprocessor --save-dev

Configuration

arma.conf.js
le.exports = function(config) {
nfig.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.

arma.conf.js
le.exports = function(config) {
nfig.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.

arma.conf.js
le.exports = function(config) {
nfig.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…

>something</div>

… will be served as template.html.js:

lar.module('template.html', []).run(function($templateCache) {
emplateCache.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.

arma.conf.js
le.exports = function(config) {
nfig.set({
// ...

ngHtml2JsPreprocessor: {
  // ...

  angular: 2
}

The template template.html…

>something</div>

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

ow.$templateCache = window.$templateCache || {}
ow.$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.

arma-test-shim.js

em.import('angular2/testing').then(function(testing) {
turn 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]);
;
hen(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.