用于在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);
      }
    }
  };
});

每个控制器加载它的模板css.虽然我注入了路径(通过另一个服务),但仍然感觉我打破了逻辑和视图之间的分离.

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

Answer 1

如果您的目标是 HTML5 浏览器，并且假设每个模块都有一个视图，则可以在视图中使用作用域样式表来实现此目的。如果您想使用 css 文件，可以使用@import语法将 css 文件加载到<style>标签中。下面是一个视图的 HTML：

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

看看这个笨蛋。它在 Mac OS X 下的最新版本 Chrome (27.x) 和 Firefox (21.x) 中对我有用。

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