I'm learning AngularJS and I have a bit of a problem with directives. I don't like how they look. Specifically, I don't like when there is a lot of html in the middle of the javascript. Look at the following example: 

```
myApp.directive("myDir", function() {
  return {
    restrict: "E",        // directive is an Element (not Attribute)
    scope: {              // set up directive's isolated scope
      name: "@",          // name var passed by value (string, one-way)
      amount: "=",        // amount var passed by reference (two-way)
      save: "&"           // save action
    },
    template:             // replacement HTML (can use our scope vars here)
      "<div>" +
      "  {{name}}: <input ng-model='amount' />" +
      "  <button ng-click='save()'>Save</button>" +
      "</div>",
    replace: true,        // replace original markup with template
    transclude: false,    // do not copy original HTML content
    controller: [ "$scope", function ($scope) { …  }],
    link: function (scope, element, attrs, controller) {…}
 }
});   

```

Having html code rendered from a javascript string seems so old school. :D
I've seen that there is the `templateUrl` to use, but that loads a full page, and if the directive is small, this seems far from optimal.

What I would like to do is to load a html file with loads of named templates in it. Is that easy, and if not, anyone have a successful pattern for this?

Could anyone point me in the right direction? I really don't want to start writing html within my code after all these years of separation of code and html, and I don't want to start my career as AngularJS developer by extending the framework. ;)

Or am I using directives wrong? (The example code above is from a tutorial I read)