7

在我的 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文件打包成一个大文件）？

4

1 回答 1

2

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

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

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

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

于 2013-06-02T14:09:48.207 回答