Nutritious Pumpkin Meal

    angular-templatecache-webpack-plugin

    1.0.1 • Public • Published

    angular-templatecache-webpack-plugin

    npm npm license

    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


    ⚠️ If you are a Laravel user, check out this laravel mix package ⚠️


    Install

    Install with npm or yarn

      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:

    ℹ️ 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.

    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:

    '}]);'

    License

    MIT

    Install

    npm i angular-templatecache-webpack-plugin

    DownloadsWeekly Downloads

    718

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • rafaelmussi