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

在与 AngularJS 斗争了 2 年后，我们来到了一个面向模块的结构，其中每个模块都可以是独立的组件，包括指令、服务、模板和测试。

我们还定义了 2 个通用模块：Data Layer 和 UI Library。