AngularJS - Reusing HTML template code without AJAX call

Question

I have an Angular app which displays "cards" (think Google cards) in two columns. Because of this I end up with HTML looking a little like

<div class="leftColumn">
    <div ng-repeat="module in Modules">
        <span>{{module.UpTime.TotalTime}}</span>

        <h2>{{module.ModuleName}}</h2>
        ...
    </div>
</div>

<div class="rightColumn">
    <!-- I want the template here too :) -->
</div>

How can I write the template code within leftColumn only once such that it can be used in both leftColumn and rightColumn. Note I realise this can be done with ng-include but why does this have to be a separate file, what if I want to specify the template within my current HTML page?

may be like gist.github.com/whisher/0dc3f28d89cfc2a9b875 yes I've cheated :) — Whisher
– Whisher, Commented Nov 25, 2014 at 11:06

hon2a · Accepted Answer · 2014-11-25 11:39:28Z

3

See documentation on how to embed multiple templates within a single page. Then just use ng-include and they will be loaded from local cache without any remote calls.

And to make it easier, here's a code sample for you:

<!-- include this somewhere inside the element with `ng-app` attribute ... -->
<script type="text/ng-template" id="/tpl.html">
    <div ng-repeat="module in Modules">...</div>
</script>

<!-- ... and then use the template as you would a remote one -->
<div class="leftColumn" ng-include="'/tpl.html'"></div>
<div class="rightColumn" ng-include="'/tpl.html'"></div>

Keep in mind that using <script> this way means compiling it as an AngularJS directive, so it must be inside the element with ng-app attribute.

edited Nov 25, 2014 at 11:39

answered Nov 25, 2014 at 11:05

hon2a

7,2545 gold badges47 silver badges60 bronze badges

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

4 Comments

Chris Over a year ago

I dont want to include it via an external HTML page!

hon2a Over a year ago

Have you read the part of my answer where it says "include multiple templates within a single page"? (I'll change it to say "embed", then.) Did you look at the linked documentation?

Chris Over a year ago

How do I do this without the click? Im trying to get it to just work statically but its not playing ball, it keeps trying to load /tpl.html - Ive copied your code but it still does this

hon2a Over a year ago

See this working demo. Your <script type="text/ng-template"> is an AngularJS directive, so it must NOT be outside your ng-app element.

Collectives™ on Stack Overflow

AngularJS - Reusing HTML template code without AJAX call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related