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

gulp-angular-embed-templates2

v2.2.0

Published

gulp plugin to include the contents of angular templates inside directive's code

Downloads

3

Readme

gulp-angular-embed-templates

gulp plugin to include the contents of angular templates inside directive's code


Plugin searches for templateUrl: {template url} and replace it with template: {minified template content}. To archive this template first minified with minimize

Nearest neighbours are:

  • gulp-angular-templates - good for single page applications, combine all templates in one module. gulp-angular-embed-templates is better for multi page applications, where different pages use different set of angular directives so combining all templates in one is not an option. For single page applications they are similar but angular-inject-templates doesn't forces you to change your code for using some additional module: just replace template reference with the template code.
  • gulp-include-file - can be used for the same purpose (file include) with minimize plugin as transform functions. gulp-angular-embed-templates do all of this out of the box.

Versions / Release Notes

CHANGELOG on GitHub

Install

npm install --save-dev gulp-angular-embed-templates

Usage (Angular 1.x)

Given the following file structure

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html:

<strong>
    Hello world!
</strong>

gulpfile.js:

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates will generate the following file:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

Usage (Angular 2.0)

Given the following file structure

src
+-hello-world
  |-hello-world-component.ts
  +-hello-world-template.html

hello-world-component.ts:

class Component extends Directive {
  restrict: string = "E";
  controller: Controller;
  controllerAs: string = "vm";
  templateUrl: string = "angular2-template.html";
}
// or
@View({
    ...
    templateUrl: 'angular2-template.html'
})

angular2-template.html:

<task-cmp [model]="task" (complete)="onCmpl(task)">
    {{index}}
</task-cmp>

gulpfile.js:

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.ts') // also can use *.js files
        .pipe(embedTemplates({sourceType:'ts'}))
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates will generate the following file:

class Component extends Directive {
  restrict: string = "E";
  controller: Controller;
  controllerAs: string = "vm";
  template:string='<task-cmp [model]="task" (complete)="onCmpl(task)">{{index}}</task-cmp>';
}
// or
@View({
    ...
    template:'<task-cmp [model]="task" (complete)="onCmpl(task)">{{index}}</task-cmp>'
})

Note: call embedTemplates before source maps initialization.

API

embedTemplates(options)

options.sourceType

Type: String. Default value: 'js'. Available values:

  • 'js' both for Angular 1.x syntax templateUrl: 'path' and Angular 2.x syntax @View({templateUrl: 'path'})
  • 'ts' additionally support Angular 2.x TypeScript syntax class Component {templateUrl: string = 'path'}

options.basePath

Type: String. By default plugin use path specified in 'templateUrl' as a relative path to corresponding '.js' file (file with 'templateUrl'). This option allow to specify another basePath to search templates as 'basePath'+'templateUrl'

skip one template embedding

The easiest way to skip one concrete is just add some comment like /*!*/ between templateUrl and template path, like this: templateUrl: /*!*/ '/template-path.html'

options.skipFiles

Type: RegExp or Function. By default: do not skip any files. RegExp can test file name to skip template embedding, but this file still be passed in general gulp pipe and be visible for all follow plugins. Function can be used for more detail filtering. Example: function(file) {return file.path.endsWith('-skip-directive.js');}

options.skipTemplates

Type: RegExp or Function. By default: do not skip any templates. RegExp can test concrete templateUrl to skip it (like /\-large\.html$/). Function can be used for more detail filtering. Example: function(templatePath, fileContext) {return templatePath.endsWith('-large.html');}

options.minimize

Type: Object. Default value: {parser: customParser}

settings to pass in minimize plugin. Please see all settings on minimize official page. Please don't specify key 'parser' because it already used for internal purposes

options.skipErrors

Type: Boolean. Default value: 'false'

should plugin brake on errors (file not found, error in minification) or skip errors (warn in logs) and go to next template

options.jsEncoding

Type: String. Default value: 'utf-8'

js files encoding (angular directives)

options.templateEncoding

Type: String. Default value: 'utf-8'

angular template files encoding

options.maxSize

Type: Number. Not specified by default (templates of any size allowed)

define the max size limit in bytes for the template be embedded. Ignore templates which size exceed this limit

License

This module is released under the MIT license.