How can I load templates from an html file into my Angular app?

Question

I have a bunch of template html files in my Angular app, and it was getting inefficient for distribution. So I checked out grunt-angular-combine to put all my templates into one single HTML file. So now it looks like

<script type="text/ng-template" id="modules/home/profile.template.html">
<div id="template-seasons">
    This is empty! But it's the proifle template
</div></script>
<script type="text/ng-template" id="modules/home/score.template.html">
...

The trouble is, how can I "import" all of these individual templates into my app so I can refer to them from my ui-router states, ng-includes s, etc..

Answer 1

Load the result file, Then you can just use it's path in templateUrl in ui-router config.

templateUrl: "modules/home/profile.template.html"

Or if you neet to use $compile somewhere, use $templateCache.get("modules/home/profile.template.html") to get the template.