将自定义指令的CSS样式保存在单独的文件中

Question

我正在学习Angular，我需要有关最佳实践的建议，以及深入挖掘该主题的总体方向：

我正在尝试使用Angular创建一个Web应用程序，它由许多独立的小部件组成，我决定将它们作为独立的自定义指令实现。

我想将这些自定义指令设置为可重用，可移动，可替换和内聚，并将所有的相关html / css / js文件放在他们自己的专用文件夹中，并带有一个文件夹这样的结构：

为自定义指令的模板部分加载单独的CSS文件的最佳做法是什么？ （例如，我应该从partial.html加载最终将出现在html主体中的CSS吗？我应该考虑在构建时将我的css文件与Grunt合并吗？）

Answer 1

您应该将所有CSS构建到单个文件中。如果没有合并，则需要向服务器发送额外请求并处理CSS，这样可以在呈现页面之前增加更多时间。

要获得额外的加载性能，您可以将所有HTML片段合并到一个文件中，也可以预先加载。

<script type="text/ng-template" id="temp2.html">
    <div class="view">
    </div>
</script>