css - 在 Angular.js 中组织和加载 CSS 的模式

Question

在我的 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);
      }
    }
  };
});

每个 Controller 加载它的模板 css。 虽然我注入(inject)了路径(通过另一个服务)，但感觉就像我打破了逻辑和 View 之间的分离。

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

Answer 1

如果您的目标是 HTML5 浏览器，并且假设每个模块都有一个 View ，您可以使用 scoped stylesheets在你看来要做到这一点。如果你想使用 css 文件，你可以使用 @import将 css 文件加载到 <style> 的语法标签。这是一个 View 的 HTML:

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

查看 this plunker .它适用于 Mac OS X 下最新版本的 Chrome (27.x) 和 Firefox (21.x)。

请注意，许多人反对使用 @import出于性能原因。事实上，您可以看到在加载页面和应用样式之间存在轻微延迟。