Grunt build task to concatenate & register your AngularJS templates in the $templateCache
NOTE:
- Use
0.1.x
for Grunt0.3.x
. - Use
0.2.x
or0.3.x
for Grunt0.4.x
.
Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-angular-templates
Then add this line to your project's grunt.js
gruntfile:
grunt.loadNpmTasks('grunt-angular-templates');
This plugin provides the grunt task ngtemplates
, which will allow you to compile your HTML templates into a single JS file,
which preloads $templateCache
to prevent round-trips to the server.
// grunt.js
grunt.initConfig({
ngtemplates: {
myapp: {
options: {
base: 'src/views', // $templateCache ID will be relative to this folder
prepend: '/static/assets/', // (Optional) Prepend path to $templateCache ID
module: 'App' // (Optional) The module the templates will be added to
// Defaults to grunt target name (e.g. `myapp`)
// ...or...
module: {
name: 'App', // (Optional) Explicitly define module name
define: true // (Optional) Define new module (Default: false)
},
concat: 'dist/js/app.js' // (Optional) Append to existing `concat` target
noConflict: 'otherAngular' // (Optional) Name of angular.noConflict() app uses
},
src: 'src/views/**.html',
dest: 'dist/templates.js'
}
}
});
This will generate the following at dist/templates.js
:
angular.module('App').run(['$templateCache', function($templateCache) {
...
}]);
There are 3 different ways to make use of the compiled templates in your project:
an HTML script tag, an existing concat
task, or usemin
's dynamic concat
task.
<script src="dist/templates.js"></script>
Either add it explicitly to your concat
task:
concat: {
myapp: {
src: [
'src/js/**/*.js', // MyApp module first
'<%= ngtemplates.myapp.dest %>' // Generated templates (`dist/templates.js`)
],
dest: 'dist/js/app.js'
}
}
or have ngtemplates
add it to an existing concat
task for you:
concat: {
myapp: {
src: 'src/js/**/*.js', // Will automatically have `dist/templates.js` appended
dest: 'dist/js/app.js'
}
},
ngtemplates: {
myapp: {
options: {
concat: 'myapp' // Name of concat target to append to
},
src: 'src/views/**.html',
dest: 'dist/templates.js'
}
}
Using grunt-usemin
First, note the output of build:js
in your HTML:
<!-- build:js dist/js/app.js -->
<script src="src/js/app.js"></script>
...
Finally, add concat: 'dist/js/app.js
to the concat
option
ngtemplates: {
myapp: {
options: {
concat: 'dist/js/app.js'
},
src: 'src/views/**.html',
dest: 'dist/templates.js'
}
}
This will append the output file dist/js/templates.js
to
usemin
's dynamic concat
task: dist/js/app.js
.
It's possible to define a new angular module in the generated JS file.
ngtemplates: {
myapp: {
options: {
module: {
name: 'templates',
define: true
}
},
src: 'src/views/**.html',
dest: 'dist/templates.js'
}
}
This will generate the following at dist/templates.js
:
angular.module('templates', []).run(['$templateCache', function($templateCache) {
...
}]);
If you want the templates to append to a pre-existing module, simply leave off the define
option by default.
- Fix unknown concat target bug on windows, thanks to @trask (#31)
- Allow the creation of a new module via
module.define
, thanks to @sidwood (#28)
- Fix error that occurs when adding 0-length files, thanks to @robertklep (#27)
- Add
noConflict
option to work with angular.noConflict, thanks to @mbrevoort (#26)
- Fix issue with dading to
concat
task when it's an array, thanks to @codefather (#23)
- Preserver line endings in templates, thanks to @groner (#21)
- Attempt to fix a bug with
Path
, thanks to @cgross (#19)
- Add
concat
option for automatically adding compiled template file to existingconcat
(orusemin
-created) task, thanks to @cgross (#17)
- Add
module
option for setting which module the templates will be added to, thanks to @sidwood (#20)
- Add
prepend
option for modifying final$templateCache
IDs, thanks to @mbarchein. (#16)
- BC break - Templates are added to an existing module (e.g.
myapp
) rather than being their ownmyapp.templates
module to be manually included, thanks to @geddesign. (#10)
-
Fixes
- Escape backslashes, thanks to @dallonf. (#9)
- Remove
./bin/grunt-angular-templates
. No need for it!
- Update to Grunt 0.4, thanks to @jgrund. (#5)
-
Fixes
- Convert
\\
to/
in template IDs (for on win32 systems) (#3)
- Convert
- Added NPM keywords
-
Fixes
-
New
- Added directions to README on how to integrate with AngularJS app
- Integrated with TravisCI
- Released to NPM
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Copyright (c) 2013 Eric Clemmons Licensed under the MIT license.