templateUrl vs template in AngularJS

Question

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 complexity, just because I hate putting HTML in strings, but I would love to learn about reasons beyond just subjective emotions.

Answer 1

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

Answer 2

I wrote a blog post about this: http://www.smarpshare.com/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!

Answer 3

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.