AngularJS: Хорошая практика - где положить шаблоны? (завод/директивы)

Question

Мне интересно, какая практика лучше?

1. Положить шаблоны в директивы?
2. Поместите шаблоны на завод, введите эту фабрику внутри директив и используйте шаблоны с фабрики?

Для лучшего понимания:

Пример 1:

angular.module('myApp').directive('myDirective1', function() { 
    var myTemplate = '<div> 
         //a looooot of HTML 
         </div>'; 

    return { 
     template: myTemplate 
    }; 
}); 

Пример 2:

angular.module('myApp').directive('myDirective2', ['templateFactory', function (templateFactory) { 

    return { 
     template: templateFactory.myTemplate 
    }; 
}]); 


angular.module('myApp').factory('templateFactory', function() { 
    var Template = '<div> 
         //a looooot of HTML 
        </div>'; 
    return { 
     myTemplate = Template 
    } 
}); 

Рассмотрим, что у меня есть, например 20 директив и каждый из них собственный шаблон - поместите все шаблоны внутри фабрики или оставьте их в директивах?

Какой способ лучше использовать, лучше для чтения, лучше всего?

Я упростил эти директивы для чтения и лучше понять эту проблему, но в моем проекте директив есть много вещей внутри (контроллеры, область и т.д.)

Answer 1

Что я хотел бы сделать, это положить шаблоны отдельные файлы под ресурсами.

В директивах использовать

angular.module('myApp').directive('myDirective1', function() { 
    return { 
     templateUrl: "path/to/the/template.html" 
    }; 
}); 

Если вы предоставляете свои директивы другим вне вашего приложения, то я бы просто поставить их в директивах. вот так.

angular.module('myApp').directive('myDirective1', function() { 
    return { 
     template: "<div> ... </div>" 
    }; 
}); 

Answer 2

Я использую эту файловую структуру, и я очень уверен в этом;)

js 
|- controllers 
|- directives 
    |- ExampleDirective 
    |- ExampleDirective.js 
    |- ExampleDirective.html 
    |- ... 
|- filters 
|- services 

Затем просто использовать директиву с templateUrl так:

angular.module('myApp').directive('ExampleDirective', function() { 
    return { 
     templateUrl: '[myPath]/ExampleDirective.html' 
    }; 
}); 

Answer 3

После 2 лет борьбы с AngularJS мы пришли к модульной структуре, где каждый модуль мог быть независимым компонентом и включать директивы, servic es, шаблоны, а также тесты.

Также мы определим 2 общих модулей: Layer данных и UI Library.