Angular Templatecache

Laravel mix extension that concatenates and registers AngularJS templates in the $templateCache.
latest v1.0.1 - released
rafaelmussi
28 downloads last week
MIT license
2 versions
angular-templatecache-webpack-plugin
angular
angularjs
angular js
templatecache
template
template cache
cache busting

Laravel Mix Angular templateCache

npm npm license

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

Install with npm or yarn

  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, set options.standalone to true.

Tip: mix.cacheTemplates(), mix.angularTemplateCache() and mix.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:

'}]);'