如何在AngularJS中包含视图/部分特定的样式

Question

对我的应用程序使用的各种视图使用单独的样式表的正确/可接受的方法是什么？目前，我在视图/部分的html顶部放置了一个link元素，但有人告诉我这是一种不好的做法，即使所有现代浏览器都支持它，但我可以理解为什么对此不满意。另一种可能性是将单独的样式表放在我的index.html中，head但是我希望它仅在以性能名义加载其视图时才加载样式表。这是不好的做法吗，因为样式只有在将css从服务器加载后才会生效，从而导致在慢速的浏览器中快速刷新未格式化的内容？尽管我正在本地进行测试，但我还没有目睹这一点。有没有一种方法可以通过传递给Angular的对象加载CSS $routeProvider.when？提前致谢！

Answer 1

可以在内附加一个新的样式表$routeProvider。为简单起见，我使用了一个字符串，但也可以创建新的link元素，或为样式表创建服务

/* check if already exists first - note ID used on link element*/

/* could also track within scope object*/

if( !angular.element('link#myViewName').length){

    angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');

}

在页面中进行预排版的最大好处是，任何背景图像都将已经存在，并且减少了 FOUC