angular-templatecache-webpack-plugin v1.0.1
angular-templatecache-webpack-plugin
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:
:informationsource: 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:
'}]);'