Angular directive template included with ng-include

Question

I want to package and ship an angular module that includes a bunch of directives and html templates.

I am trying to bundle all the html templates for my directive into one html file and include that html file using ng-include. The templates are then used by various directives in the module.

So the 3 components are:

A few standard directives

function Directive1($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate1.html",
        link: function (scope, element, attrs) {}
    }
}

function Directive2($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate2.html",
        link: function (scope, element, attrs) {}
    }
}

An html file containing my templates at /path/to/template.html

<script type="text/ng-template" id="directiveTemplate1.html">
    <div> Template ONE </div>
</script>


<script type="text/ng-template" id="directiveTemplate2.html">
    <div> Template TWO </div>
</script>

And finally the html page that ties it all together

<html>
    <body>
    <directive1/>

     <directive2/>
    </body>

    <ng-include src="'/path/to/templates.html'">
</html>

Is it possible to do this?

I want to do it like this so I can ship the angular module to a 3rd party and they only need to include a minified js file for the module and a single html file with all the partial views. I can't inline my template html in the directives as the partials are quite large.

I would think that angular would include and parse the templates.html file on page load and insert the templates into the templateCache for use by the directives later - when the directive's templateUrl is resolved asynchronously.

I've tried this and it seems like the directive can't find the templates.

Any ideas?

dfsq · Accepted Answer · 2015-09-18 11:47:18Z

3

Much better options would be to package HTML templates into JS file itself, so your module is shipped with HTML already available templates and nothing will needs to be downloaded.

The idea is that, Angular checks presence of templates (by path) in $templateCache and if template is there (has already been downloaded or was put there manually) then it just returns content of it immediately. You need similar behaviour. By the way, script directive (with type="text/ng-template") does the same - just puts its innerHTML into template cache.

To achieve this you either put templates into $templateCache manually or - more convenient - to automate this task with tools like ngHtml2js, which are available for all main build systems like gulp and grunt.

answered Sep 18, 2015 at 11:47

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JeffG Over a year ago

Hmm yeah that would work - but it isn't an angular solution. Is there no way in angular to include templates from another file without putting all the html in js? Thanks for the suggestion - ill take a look at it if I can't find a way to do it in angular

dfsq Over a year ago

You could do it like you want, but what I suggesting is to use template cache. "my templates are large and putting them in js would make them unmaintainable" - you are not going to maintain minified templates. The point is that you package templates via build task, in development you have regular HTML template files. But once you build the project it minifies js files as well as packages template into JS.

JeffG Over a year ago

Yeah - was hoping for a solution within angular, but this seems like a good alternative - thanks

Mahesh · Accepted Answer · 2015-09-18 11:43:33Z

1

Refer Angular-bootstrap library. they have embedded their template inside JS file itself. http://angular-ui.github.io/bootstrap/ On this link select Create a Build option, select any of the module and download it. Check the source code of .tpl.js file.

answered Sep 18, 2015 at 11:43

Mahesh

1,6354 gold badges24 silver badges46 bronze badges

3 Comments

Mahesh Over a year ago

Its ui-bootstrap-custom-tpls-0.13.4.js. If you download accordion package, check the code from line number 213 to 231.

JeffG Over a year ago

Thanks Manesh - found it now. They are embedding the template html in js and injecting it into the templateCache - i'm hoping to not do it this way as my templates are large and putting them in js would make them unmaintainable

Mahesh Over a year ago

This technique will help you cache your template and will give you a better performance. That's the reason Angular-ui is using it. Also injecting it as a dependency is much easier than keeping it in separate HTML.

Collectives™ on Stack Overflow

Angular directive template included with ng-include

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related