Webpack plugin that concatenates and registers AngularJS templates in the $templateCache.
npm install angular-templatecache-webpack-plugin[![npm][npm]][npm-url]
!npm
> Speed up your AngularJS app by automatically combining, concatenating, registering and caching your AngularJS HTML templates in the $templateCache.
Install | Usage | Options and Defaults | License
----
#### :warning: If you are a Laravel user, check out this laravel mix package :warning:
----
``bash`
npm i --save angular-templatecache-webpack-plugin
`bash`
yarn add angular-templatecache-webpack-plugin
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 . If you want to create a new module, set options.standalone to true.
| {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) {'
> `
> ---
>
> js
> '$templateCache.put("<%= url %>","<%= contents %>");'
> `
> ---
>
> js
> '}]);'
> ``[npm]: https://img.shields.io/npm/v/angular-templatecache-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/angular-templatecache-webpack-plugin