fly-ng-templatecache

Concatenate and register Angular JS templates in the $templateCache, with Fly.

Install

npm install -D fly-ng-templatecache

Example

export default function* () {
  yield this.source('templates/**/*.html')
    .ngTemplates({
      standalone: true,
      file: 'app-views.html',
      moduleName: 'app.templates',
      // ...
    })
    .target('dist/js');
}

API

standalone

Type: boolean

Default: false

If true, creates a new Angular JS module. If false, it is assumed that you are using an existing module.

file

Type: string

Default: templates.js

The name of the file that will be place in your target() destination. Do not include a directory structure here.

moduleName

Type: string

Default: templates

The name of your Angular JS module or submodule.

.ngTemplates({
  moduleName: 'app.templates'
})

moduleSystem

Type: string

Default: null

The module system that your templates-module should be prepared for. Currently supports:

• iffe -- (immediately-invoked function expression)
• requirejs -- Require JS
• browserify -- Browserify
• es6 -- ES6 / ES2015 module import/export

.ngTemplates({
  moduleSystem: 'browserify'
})

templateHeader

Type: string

Default: angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {

This precedes your template content and will correctly initialize your Angular module. It is not recommended you change this, but if you do, you retain the <%= module %> variable.

If the standalone option is true, an empty dependency array ([]) will replace <%= standalone %>.

templateContent

Type: string

Default: $templateCache.put("<%= url %>","<%= contents %>");

The template wrapper for each view's content. It is not recommended to change this.

templateFooter

Type: string

Default: }]);

This is appended to your module file. There probably is no reason to change this.

transformUrl

Type: function

Default: (url) => url

The function that handles or alters your views' reference URLs.

By default:

yield this
  .source('app/scripts/templates/*.html')
  .ngTemplates(/* defaults */)
  .target('dist/js')

All template files will be retain their full path, so you must use the full path.

<div ng-include="'app/scripts/templates/app.html'"></div>

To change this, pass in a custom transformUrl function:

yield this
  .source('app/scripts/templates/*.html')
  .ngTemplates({
    transformUrl: (url) => {
      return url.replace('app/scripts/templates/', '') // remove that path
    }
  }
  })
  .target('dist/js')

With app/scripts/templates/ removed, the reference ID is now just app.html.

<div ng-include="'app.html'"></div>

License

MIT © Luke Edwards et al