grunt-plugin-angular-template-inline

Inlines AngularJS templates into an HTML file

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-plugin-angular-template-inline --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-plugin-angular-template-inline');

This plugin was updated to work with Grunt 0.4. It is based on nebhale/grunt-plugin-angular-template-inline.

Angular template inline task

Run this task with the grunt angularTemplateInline command.

This task inlines AngularJS templates into a single HTML file. It does this by creating <script type="text/ng-template" id="<file-name>"> blocks in the header of the target file. The id of the <script> tags matches the name of each file, relative to the specified base file. Therefore, all code that works before being inlined, will continue to work after it is inlined.

Usage Examples

Specify the templates to be inlined into a target file. The base file (typically app/index.html) is used to set the relative path in the id attribute of each template.

angularTemplateInline: {
  app: {
    files: [
      {
        src: ['app/views/*.html'], // Templates to be inlined
        dest: 'dist/index.html', // Destination file
        baseFile: 'app/index.html' // Base file
      }
    ]
  }
}