用于在Angular.js中组织和加载CSS的模式

在我的Angular应用程序中，我希望以模块化的方式加载css文件——每个模块都有自己的css文件。通过这种方式，我可以轻松地添加、删除或移动模块

到目前为止，我发现最好的方法是创建一个服务：

angular.module('cssLoadingService', []).factory("CssLoadingService", function () {
  return {
    loadCss: function (url) {
      if (document.createStyleSheet) { //IE
        document.createStyleSheet(url);
      } else {
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
      }
    }
  };
});

每个控制器加载其模板css。 尽管我（通过另一个服务）注入了路径，但它仍然让人感觉我正在打破逻辑和视图之间的分离

---

有没有其他优雅的方式（不包括将css文件打包成一个大文件）？

如果您的目标是HTML5浏览器，并且假设每个模块都有一个视图，那么您可以在视图中使用它来实现这一点。如果希望使用css文件，可以使用

@import

语法将css文件加载到

标记中。以下是视图的HTML：

<div>
  <style scoped>@import url('main.css')</style>
  <h1>This is Main and should be Gray</h1>
</div>

@导入url（'main.css'）
这是主要的，应该是灰色的

退房。它在MacOSX下的最新版本的Chrome（27.x）和Firefox（21.x）中对我起了作用

---

请注意，出于性能原因，许多人建议不要使用

@import

。事实上，您可以看到在加载页面和应用样式之间有轻微的延迟。

这是一个好主意。看来延迟问题对我来说至关重要。