AngularJS - Повторное использование HTML-кода шаблона без вызова AJAX

Question

У меня есть приложение с угловым выражением, которое отображает «карты» (думаю, карты Google) в двух столбцах. Из-за этого я в конечном итоге с HTML выглядит немного как

<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> 

Как я могу написать код шаблона в пределах leftColumn только один раз, так что он может быть использован как в leftColumn и rightColumn. Примечание. Я понимаю, что это можно сделать с помощью ng-include, но почему это должен быть отдельный файл, что, если я хочу указать шаблон на моей текущей HTML-странице?

Answer 1

See documentation о том, как встраивать несколько шаблонов в одну страницу. Затем просто используйте ng-include, и они будут загружены из локального кеша без каких-либо удаленных вызовов.

---

И сделать это проще, вот code sample для вас:

<!-- 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> 

Имейте в виду, что использование <script> таким образом средства компиляции как AngularJS директивы, так он должен быть внутри элемента с атрибутом ng-app.