title: Where should I put the html in my angular directives?
body: <p>When writing a directive I end up writing (sometimes a lot) of html-code in my javascript. </p>
  
  <p>I don't like to have xml in my javascriptfiles. Templating can become pretty complex, most  markup engines will render it in one colour and you have to use ' and +. Is there any good practice to separate the html and the javascript.</p>
  
  <p>Here is a sample of how it can look:</p>
  
  <pre><code>angular.module('ballentines', ['ngStorage']).
  directive('fineUploader', function() {
      return {
          restrict: 'A',
          scope: {},
          require: '?ngModel',
          link: function($scope, element, attributes, ngModel) {
              $scope.uploader = new qq.s3.FineUploader({
                  debug: true,
                  element: element[0],
                  request: {
                      endpoint: 'endpoint',
                      accessKey: 'accesskey'
                  },
                  signature: {
                      endpoint: '/s3/'
                  },
                  iframeSupport: {
                      localBlankPagePath: '/success.html'
                  },
                  retry: {
                      enableAuto: true // defaults to false
                  },
                  text: {
                      uploadButton: '&lt;p&gt;Upload File&lt;/p&gt;'
                  },
                  template:
                      '&lt;div class="qq-uploader"&gt;' +
                          '&lt;p class="qq-upload-drop-area"&gt;{dragZoneText}&lt;/span&gt;&lt;/p&gt;' +
                          '&lt;div class="qq-upload-button btn btn-info"&gt;{uploadButtonText}&lt;/div&gt;' +
                          '&lt;span class="qq-drop-processing"&gt;{dropProcessingText}&lt;/span&gt;' +
                          '&lt;ul class="qq-upload-list" &gt;&lt;/ul&gt;' +
                      '&lt;/div&gt;',
              });
          }
      };
  
  })
  </code></pre>