Negli script precedenti abbiamo visto come sia semplice creare una direttiva che visualizzi un frammento di codice HTML embeddato all'interno della direttiva. Il fatto di avere il codice HTML specificato nella direttiva è comodo quando il codice è composto da pochi caratteri, ma quando il codice HTML diventa di più allora è più conveniente utilizzare un file HTML proveniente dal server. Questo rende notevolmente più semplice la manutenzione in quanto separa il codice HTML dal codice della direttiva.
Per usare un file HTML dobbiamo usare la proprietà templateUrl, invece della proprietà template, come mostrato nell'esempio.

var app = angular.module("myApp", []);
  app.directive("My-Directive", function() {
    return {
      restrict: "EA" 
      templateUrl: 'views/myDirectiveTemplate.html'
    };
  });