在 AngularJS 部分中放置 CSS 的位置？答案

【问题标题】：Where to place CSS in AngularJS partials?在 AngularJS 部分中放置 CSS 的位置？
【发布时间】：2014-09-05 15:28:11
【问题描述】：

我知道一个好的做法是将 css 代码保存在外部 .css 文件中，而不是在 html 代码中添加标签。但是只对单个 Angular 部分 html 有效的 css 代码呢？

感谢您的建议。

【问题讨论】：

请花点时间查看答案并选择正确的答案。

标签： css angularjs partials

【解决方案1】：

我强烈建议将其放在外部 CSS 文件中。如果仅用于单个页面的样式不太重，只需将其放在您的主 CSS 文件中即可。

请记住，另一个文件会向服务器发出另一个请求。

如果你仍然想用 Angular 添加另一个 CSS 文件，你应该用 $rootScope 来做：

$rootScope.$on('$routeChangeSuccess', function(ev,data) {   

  $rootScope.routeName = data.$$route.originalPath;

});

然后，在你的布局文件中：

<link ng-if="routeName === 'myPartial' " href="css/myPartial.css" rel="stylesheet" type="text/css" />

一些关于 AngularJS rootScope 的文档：https://docs.angularjs.org/api/ng/service/$rootScope

【讨论】：

【解决方案2】：

作为最佳实践，CSS 文件必须始终放在专用的[fileName].css 中。

如果您想让某些 CSS 仅应用于代码的某些部分（因为它总是使用 CSS），您可以指定专用规则。

非常简单的示例（2 个部分，1 个样式表）

第一：

<div id="partial1">
  <h1>I'm the first</h1>
</div>

秒：

<div id="partial2">
  <h1>I'm the second</h1>
</div>

样式表：

// Common rule to both the <h1>
h1 {
  font-size: 64px;
}

// only for partial1
#partial1 h1 {
  color: #C0C0C0;
}

//only for partial2
#partial2 h1 {
  color: #FF0000;
}

编辑：

您也可以使用 SASS 并为每个部分（例如 _partial1.scss 和 _partial2.scss）创建一个不同的文件，这些文件将包含在您的 main.scss 中，如下所示：

@import "partial1",
        "partial2";

在此处查看有关 SASS 的更多信息：http://sass-lang.com/guide

【讨论】：

But what about css code that is only valid for a single angular partial html? ID 和 Classes 用于此目的，这就是 CSS 的使用方式。您也可以内联该部分的 CSS，但这很糟糕。
@SW4 我给了他一个建议，让他做我认为最好的事情，然后我给了他一个答案，以实现他以 Angular 方式提出的要求。
@domokun 我完全同意您的解决方案，这就是我每天都在做的事情。但我不确定这是他要求的。他询问是否有办法只为每个 Angular 部分加载相关的 CSS。在这里您可以加载所有内容，即使它不会被解释。
@enguerranws 我觉得我根据实际的最佳实践给了他最好的回应。新手经常想做他们认为正确的事情，我也不例外。但我认为，如果我们真的想帮助他们（这应该是 Stack Overflow 的全部意义所在），我们有责任指出他们的错误并为他们指明正确的方向。
好吧，我同意你的看法。但他可能不是新手，真的只想在每个部分加载相关的 CSS。