If you're looking for a detailed explanation, check out this resource: https://github.com/ericclemmons/grunt-angular-templates. Here is an example of how the output generated by this process looks when dealing with multiple .html files:
angular.module('app').run(["$templateCache", function($templateCache) {
$templateCache.put("home.html",
// contents for home.html ...
);
...
$templateCache.put("src/app/templates/button.html",
// contents for button.html
);
}]);
By doing this, when you utilize ng-include or templateUrl along with $routeProvider, the template is already loaded without requiring an additional AJAX request!
For those wondering "where to put template," refer to these examples below:
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js'
}
}
You can also register relative template URLs as shown in the following example:
ngtemplates: {
app: {
cwd: 'src/app',
src: 'templates/**.html',
dest: 'build/app.templates.js'
}
}
There are options available for minifying template HTML:
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js',
options: {
htmlmin: { collapseWhitespace: true, collapseBooleanAttributes: true }
}
}
}
Customizations for URL and output formats are also possible:
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js',
options: {
url: function(url) { return url.replace('.html', ''); }
}
}
}
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js',
options: {
bootstrap: function(module, script) {
return 'define(' + module + ', [], function() { return { init: ' + script + ' }; });';
}
}
}
}
Feel free to customize everything surrounding $templateCache.put(...) based on your specific needs.