@nicolaslojo/angular-templatecache-webpack-plugin
v1.0.2
Published
[FORK] Webpack plugin that concatenates and registers AngularJS templates in the $templateCache.
Downloads
248
Maintainers
Readme
angular-templatecache-webpack-plugin (Webpack 5 compatible)
This is a fork of Rafael Mussi
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:
Install
npm i --save angular-templatecache-webpack-plugin
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
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).
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, setoptions.standalone
totrue
.
Options and Defaults
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.
Default Templates
templateHeader:
'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {'
templateBody:
'$templateCache.put("<%= url %>","<%= contents %>");'
templateFooter:
'}]);'