AngularJS: Bundle all partial views/templates for production

Question

I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.

In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.

Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?

P.S. It should be noted that I am not looking for cache-related solutions.

Answer 1

you can use grunt-angularjs-template

it does concatenates all templates in one file. as per its docs

Grunt build task to concatenate & register your AngularJS templates in the $templateCache

if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache