Utilize ng-include with raw (or compiled) HTML versus a template URL?

Question

Say I've got a template that contains an element with an ng-include directive:

<div ng-include src="'templates/top-promo-content.html'"></div>

I'm attempting to streamline all of our templates into our built app JS (using browserify and the brfs transform), which, conceptually, would look like:

<div ng-include src="fs.readFileSync('./templates/top-promo-content.html', 'utf8')"></div>

Which would ultimately result in:

<div ng-include src="<ul><li>list item</li></ul>"></div>

Is there any way to, rather than use a template URL within an ng-include, utilize raw or compiled HTML instead? If not, is there another alternative in angular that would allow me to accomplish this, either as some sort of include or partial, but with the ability to include raw/compiled HTML?

Answer 1

I spent a couple days on this myself and found a great solution using $templateCache.

javascript

app.run(['$templateCache', function($templateCache) {
    //Add ng-include templates to template cache
    $templateCache.put('foo.html', require('./templates/foo.html'));
    $templateCache.put('bar.html', require('./templates/bar.html'));
}]);

html

<ng-include="'foo.html'"></ng-include>

This will include the templates in your bundle.js.

In addition if you are running watchify to rebundle; any changes to the template will cause watchify to fire off a rebundle and kick a live refresh with the new template.