multiline template in directive definition

Use "\" at the end of each line.

myApp.directive('myDir', function() {
return {
    restrict: 'E',        
    template: '<div>\
                |Hello,\
                |{{test}}!\
                |</div>'
};

Here's you Fiddle

You could also make use of the JavaScript function join() to achieve this, which I think looks better.

myApp.directive('myDir', function () {
    return {
        restrict: 'E',
        template: ['<div>',
            'Hello, ',
            '{{test}}!',
            '</div>'].join(''),
    };
});

JSFiddle is here (I removed the |'s to make it look better).

I just learned you could use the symbol below the tilde (`) for multi-line template,

myApp.directive('myDir', function() {
    return {
        restrict: 'E',        
        template: `<div>
                |Hello,
                |{{test}}!
                |</div>`
    };
});