Question

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

感谢您的建议。

Answer 1

作为最佳做法，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

Answer 2

我强烈建议将其放在外部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

在AngularJS partials中放置CSS的位置？

2 个答案: