I think for routing, templateUrl should always be used over template. But for a directive, when should templateUrl be used instead of template? I see some people use chunks of HTML in string format as template, whereas others link all their directives to a templateUrl, even if the template is really simple and small.

So, what is the best practice for deciding which one to use? I am personally more in favour of using templateUrl regardless of the template's plexity, just because I hate putting HTML in strings, but I would love to learn about reasons beyond just subjective emotions.

I think for routing, templateUrl should always be used over template. But for a directive, when should templateUrl be used instead of template? I see some people use chunks of HTML in string format as template, whereas others link all their directives to a templateUrl, even if the template is really simple and small.

So, what is the best practice for deciding which one to use? I am personally more in favour of using templateUrl regardless of the template's plexity, just because I hate putting HTML in strings, but I would love to learn about reasons beyond just subjective emotions.

• javascript
• angularjs
• templates
• directive

• This is all down to opinion and your workflow. I personally never use template because as part of my build process I embed all my templates into $templateCache with grunt-angular-templates – Matt Greer Commented Mar 1, 2014 at 17:20
• Ah I feel so silly now. The answer is stated in the documentation: docs.angularjs/guide/directive "Best Practice: Unless your template is very small, it's typically better to break it apart into its own HTML file and load it with the templateUrl option." – Hans Commented Mar 1, 2014 at 17:56

3 Answers 3

It cones down to preference, really. In general I agree with you, and more plex markup always makes more sense in a separate template due to ease of editing.

I wrote a blog post about this: http://www.smarpshare./angular-template-vs-templateurl-the-move-toward-true-modular-development/ . In a nutshell, I find it is better to use dependency management system and template to organize your Angular project; it will help you to migrate to Angular 2 too!

If you using lots of template in your project like SPA application with huge html rendered going on inside each template and of-course if you want to manage your application well for future then keep it separate.