I have a big angular application with 5 templates included in the main page using

 <script type="text/ng-template" id="/myMainTemplate.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage2.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage3.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage4.html">...</script>

However, my application takes a lot of time to startup.

Removing the templates 2/3/4 fix it but of course broke the app, my guess is that angularjs takes too much time to pile the 5 templates.

Is there a way to pre-pile angularjs templates, for example with nodejs or something similar (the same way we can pile templates with handlebar maybe) ?

If I understand well the $pile instruction, the idea would be to move the instruction $pile(myTemplate) in the server-side inside of the client

I have a big angular application with 5 templates included in the main page using

 <script type="text/ng-template" id="/myMainTemplate.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage2.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage3.html">...</script>
 <script type="text/ng-template" id="/myTemplatePage4.html">...</script>

However, my application takes a lot of time to startup.

Removing the templates 2/3/4 fix it but of course broke the app, my guess is that angularjs takes too much time to pile the 5 templates.

Is there a way to pre-pile angularjs templates, for example with nodejs or something similar (the same way we can pile templates with handlebar maybe) ?

If I understand well the $pile instruction, the idea would be to move the instruction $pile(myTemplate) in the server-side inside of the client

• javascript
• angularjs
• templates
• prepile

2 Answers 2

Take a look at the grunt-html2js task.

https://github./karlgoldstein/grunt-html2js

It converts plain Angular HTML templates to JavaScript ready for concatenating into your main app bundle. Once the templates are in your app bundle they'll be primed in Angular's template cache so they load instantly.

It appears I was wrong, what takes time isn't to pile the templates. The browser is just slow to load all the page and basically the document.ready event took some time to be fired.

To fix this I only include my main template <script type="text/ng-template" id="/myMainTemplate.html">...</script> in the page, and I load the other templates using an asynch $http call, based on this solution : https://gist.github./vojtajina/3354046