{"id":25109894,"url":"https://github.com/fiveladdercon/gulp-angular-inline-template","last_synced_at":"2025-04-02T09:25:38.031Z","repository":{"id":57256749,"uuid":"50454544","full_name":"fiveladdercon/gulp-angular-inline-template","owner":"fiveladdercon","description":"Wrap partial HTML templates in ng-template script tags for inlining.","archived":false,"fork":false,"pushed_at":"2016-01-26T20:00:17.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T03:17:12.928Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fiveladdercon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-26T19:47:27.000Z","updated_at":"2016-01-26T19:47:34.000Z","dependencies_parsed_at":"2022-08-25T02:31:33.105Z","dependency_job_id":null,"html_url":"https://github.com/fiveladdercon/gulp-angular-inline-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveladdercon%2Fgulp-angular-inline-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveladdercon%2Fgulp-angular-inline-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveladdercon%2Fgulp-angular-inline-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveladdercon%2Fgulp-angular-inline-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fiveladdercon","download_url":"https://codeload.github.com/fiveladdercon/gulp-angular-inline-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246786622,"owners_count":20833723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-08T00:32:41.522Z","updated_at":"2025-04-02T09:25:37.997Z","avatar_url":"https://github.com/fiveladdercon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-angular-inline-template\n\nWraps template HTML in ng-template script tags for inlining.\n\n## Install\n\n```\n\u003e npm install gulp-angular-inline-template\n```\n\n## Usage\n\nTakes an angular directive template and wraps it in a ng-template script tag:\n\n```\ndialog.directive.html\n\n\u003cdiv class='dialog'\u003e\n  \u003ch1\u003eThis is my dialog\u003c/h1\u003e\n  \u003cdiv ng-transclude\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```javascript\nvar inline = require('gulp-angular-inline-template');\n\ngulp.src('dialog.directive.html')\n\t.pipe(inline())\n\t...\n```\n\n```\ndialog.directive.html\n\n\u003cscript type='text/ng-template' id='dialog.directive.html'\u003e\n\u003cdiv class='dialog'\u003e\n  \u003ch1\u003eThis is my dialog\u003c/h1\u003e\n  \u003cdiv ng-transclude\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c/script\u003e\n```\n\nDirective templates can then be spliced into the index.html:\n\n```\nindex.html\n\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv\u003e\n...\n\u003c/div\u003e\n##directives##\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```\ngulp.src('**/*.directive.html')\n\t.pipe(inline())\n\t.pipe(splice({key:'##directives##',outer:'index.html'}))\n\t.pipe(gulp.dest('dist'))\n```\n\n```\nindex.html\n\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv\u003e\n...\n\u003c/div\u003e\n\u003cscript type='text/ng-template' id='dialog.directive.html'\u003e...\u003c/script\u003e\n\u003cscript type='text/ng-template' id='toast.directive.html'\u003e...\u003c/script\u003e\n...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSince templates are now shipped with the index.html and stored in the template\ncache, templateUrl directive properties will not issue server requests:\n\n```javascript\ndialog.directive.js\n\nangular.module('myApp').directive('myDialog', function () {\n\treturn {\n\t\ttemplateUrl: 'dialog.directive.html', // Does not trigger an AJAX request\n\t\tlink: ...\n\t};\n});\n```\n\nNote that if you minify your HTML, you need to minimize before wrapping your\ntemplates in script tags.  This is because script tags do not normally contain\nHTML and this can trip up minifiers. Also pass a truthy value to the inline \noperation to omit new lines in the output:\n\n```\ngulp.src('**/*.directive.html')\n\t.pipe(htmlmin())\n\t.pipe(inline(true))\n\t.pipe(splice({key:'##directives##',outer:'index.html'}))\n\t.pipe(gulp.dest('dist'))\n```\n\nHowever this does not minimize the index.html file.  Instead, send\nit through the pipe and omit it from the processing step:\n\n```\ngulp.src(['**/*.directive.html','index.html'])\n\t.pipe(htmlmin())\n\t.pipe(subset(/directive.html$/, inline(true)))\n\t.pipe(splice('##directives##'))\n\t.pipe(gulp.dest('dist'))\n```\n\n## API\n\n```\ngulp-angular-inline-template([minified])\n```\n\nWithout an options the inline template wraps file contents in script tags:\n\n```\n\u003cscript type='text/ng-template' id='$filename'\u003e\n... contents of $filename ...\n\u003c/script\u003e\n```\n\n#### minified : truthy\n\nPassing a truthy value as an argument removes new lines from the script tags.\n\n## Test\n\n```\n\u003e npm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiveladdercon%2Fgulp-angular-inline-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiveladdercon%2Fgulp-angular-inline-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiveladdercon%2Fgulp-angular-inline-template/lists"}