laravel-mix-angular-templatecache v1.0.1
Laravel Mix Angular templateCache
This extension adds support for angular-templatecache-webpack-plugin to Laravel Mix. The package speeds up your AngularJS app by automatically combining, concatenating, registering and caching your AngularJS HTML templates in the
$templateCache
.
Install | Usage | Plugin Options and Defaults
Install
npm i --save laravel-mix-angular-templatecache
yarn add laravel-mix-angular-templatecache
Usage
Require the extension inside your webpack.mix.js
and call mix.cacheTemplates('src/templates/**/*.html', pluginOptions)
, like so:
// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-angular-templatecache');
// this will generate a file public/templates.js
mix.cacheTemplates('src/templates/**/*.html');
// Or:
// see more options and defaults below
mix.cacheTemplates('src/templates/**/*.html', {
outputFilename: 'another/folder/myTemplates.js', // will output at public/another/folder/myTemplates.js
});
This will generate the file public/templates.js
containing the following:
// templates.js (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.
ℹ️ 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
.Tip:
mix.cacheTemplates()
,mix.angularTemplateCache()
andmix.templateCache()
are aliases. All commands work for all examples in this section.
Plugin Options and Defaults
Name | Type | Default | Description |
---|---|---|---|
outputFilename | {String} | 'public/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. |
For more information about angular-templatecache-webpack-plugin
configurations please refer to their documentation.
Default Templates
templateHeader:
'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {'
templateBody:
'$templateCache.put("<%= url %>","<%= contents %>");'
templateFooter:
'}]);'