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 piled HTML instead? If not, is there another alternative in angular that would allow me to acplish this, either as some sort of include or partial, but with the ability to include raw/piled HTML?

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 piled HTML instead? If not, is there another alternative in angular that would allow me to acplish this, either as some sort of include or partial, but with the ability to include raw/piled HTML?

• javascript
• angularjs
• templates
• angularjs-directive
• browserify

3 Answers 3

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.

I have adapted Malkus answer to make it work in my case:

Javascript:

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

HTML

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

Works great!

Templates can be included on a page with the script tag.

<script type="text/ng-template" id="templates/top-promo-content.html">
  <ul><li>list item</li></ul>
</script>

This puts the template into the template cache and the ng-include directive gets it from there. The same is true for every directive that gets templates via a URL.