npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

laravel-mix-angular-templatecache

v1.0.1

Published

Laravel mix extension that concatenates and registers AngularJS templates in the $templateCache.

Downloads

168

Readme

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:

'}]);'