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浏览器，并假设您有每个模块的视图，则可以在视图中使用scoped stylesheets来完成此操作。如果您希望使用css文件，可以使用@import语法将css文件加载到<style>标记中。这是一个视图的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。实际上，您可以看到加载页面和应用样式之间存在轻微延迟。

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

1 个答案: