laravel-mix-angular-templatecache
v1.0.1
Published
Laravel mix extension that concatenates and registers AngularJS templates in the $templateCache.
Downloads
168
Maintainers
Readme
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:
'}]);'