[FORK] Webpack plugin that concatenates and registers AngularJS templates in the $templateCache.
npm install @nicolaslojo/angular-templatecache-webpack-plugin$templateCache.
Laravel user, check out this laravel mix package :warning:
bash
npm i --save angular-templatecache-webpack-plugin
`
`bash
yarn add angular-templatecache-webpack-plugin
`
Usage
This webpack plugin will combine all your angular .html templates and save to dist/templates.js (default filename). Just add the plugin to your webpack config as follows:
webpack.config.js
`js
const AngularTemplateCacheWebpackPlugin = require('angular-templatecache-webpack-plugin');
module.exports = {
plugins: [
new AngularTemplateCacheWebpackPlugin({
source: 'templates/*/.html'
/**
* See options and defaults below for more details
*/
})
]
}
`
This will generate a file dist/templates.js containing the following:
> :information_source: Sample output (_prettified_).
`js
angular.module("templates").run([$templateCache,
function($templateCache) {
$templateCache.put("template-file-01.html",
// content of template-file-01.html (escaped)
);
$templateCache.put("template-file-02.html",
// content of template-file-02.html (escaped)
);
// etc...
}
]);
`
Include this file in your app and AngularJS will use the $templateCache when available.
> :information_source: This plugin will __NOT__ create a new AngularJS module by default, but use a module called templates. If you want to create a new module, set options.standalone to true.
$3
Name | Type | Default | Description
---|---|---|---
source | {String} | undefined | Your html templates path/folder. You can also use glob patterns to use multiple files.
outputFilename | {String} | 'dist/templates.js' | The path/filename.js where the output file should be saved.
root | {String} | undefined | Prefix for template URLs.
module | {String} | 'templates' | Name of the existing AngularJS module.
standalone | {Boolean} | false | Create a new AngularJS module, instead of using an existing one.
escapeOptions | {Object} | {} | An object with jsesc-options. See jsesc for more information.
templateHeader | {String} | *See below | Override template header.
templateBody | {String} | *See below | Override template body.
templateFooter | {String} | *See below | Override template footer.
$3
> templateHeader:
> `js
> 'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {'
> `
> ---
> templateBody:
> `js
> '$templateCache.put("<%= url %>","<%= contents %>");'
> `
> ---
> templateFooter:
> `js
> '}]);'
> ``