在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:karma-runner/karma-ng-html2js-preprocessor开源软件地址:https://github.com/karma-runner/karma-ng-html2js-preprocessor开源编程语言:CoffeeScript 74.4%开源软件介绍:karma-ng-html2js-preprocessor
Note: If you are looking for a general preprocessor that is not tied to Angular, check out karma-html2js-preprocessor. InstallationThe easiest way is to keep $ 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 namesUse 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 // 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 For instance this <div>something</div> ... will be served as 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 cachingFor using this preprocessor with Angular 2 templates use // karma.conf.js
module.exports = function(config) {
config.set({
// ...
ngHtml2JsPreprocessor: {
// ...
angular: 2
}
})
} The template <div>something</div> ... will be served as 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 - // 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 For more information on Karma see the homepage. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论