blocks|key|2822541|text|可以将新的样式表附加到$routeProvider中的head。为了简单起见，我使用了字符串，但也可以创建新的link元素，或者为样式表创建一个服务|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2822542|/*+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">');
}|code-block|syntax|javascript|2822543|在页面中预加载的最大好处是任何背景图像都将已经存在，并且不那么活泼的FOUC|2822544|entityMap^0|B|E|0|0|Y|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Could append a new stylesheet to head within <code>$routeProvider</code>. For simplicity am using a string but could create new link element also, or create a service for stylesheets

<pre><code>/* 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('&lt;link id="myViewName" href="myViewName.css" rel="stylesheet"&gt;');
}
</code></pre>

Biggest benefit of prelaoding in page is any background images will already exist, and less lieklyhood of <code>FOUC</code>

blocks|key|2822580|text|@sz3，有趣的是，今天我不得不做你想要实现的事情：“只有当用户访问特定页面时才加载特定的CSS文件”。所以我使用了上面的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2822581|但我在这里回答你的最后一个问题：‘，我到底应该把代码放在哪里。有什么想法吗，？|2822582|您将代码包含到resolve中是正确的，但是您需要稍微更改一下格式。|2822583|看看下面的代码：|2822584|.when('/home',+{
++title:'Home+-+'+%2B+siteName,
++bodyClass:+'home',
++templateUrl:+function(params)+{
++++return+'views/home.html';
++},
++controler:+'homeCtrl',
++resolve:+{
++++style+:+function(){
++++++/*+check+if+already+exists+first+-+note+ID+used+on+link+element*/
++++++/*+could+also+track+within+scope+object*/
++++++if(+!angular.element('link#mobile').length){
++++++++angular.element('head').append('<link+id="home"+href="home.css"+rel="stylesheet">');
++++++}
++++}
++}
})|code-block|syntax|javascript|2822585|我刚刚测试过，它工作得很好，它注入html，只有当我点击‘/home.css’路径时，它才会加载我的‘home’。|2822586|完整的解释可以在here中找到，但基本上是解析：应该获得以下格式的对象|2822587|{
++'key'+:+string+or+function()
}+|2822588|你可以把'key‘命名为任何你喜欢的名称--在我的例子中，我称之为'style’。|2822589|然后，对于该值，您有两个选项：|2822590|2822591|如果是字符串，则是服务的别名。|unordered-list-item|2822592|如果是函数，则注入该函数，并将返回值视为依赖项。|2822593|2822594|这里的要点是，在实例化控制器和触发$routeChangeSuccess事件之前，将执行函数中的代码。|2822595|希望这能有所帮助。|2822596|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ngRoute.%2524routeProvider^0|R|13|0|0|13|0|0|Y|0|0|8|0|0|0|D|0|L|3|8|4|0|0|0|5|3|Y|5|0|0|0|3|3|0|3|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1V|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@$9|22|A|23|1|24]]|E|$]]|$1|U|3|V|5|N|7|25|8|@]|D|@]|E|$O|P]]|$1|W|3|X|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2B|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]|$1|11|3|12|5|13|7|2D|8|@$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|14|3|15|5|13|7|2G|8|@$9|2H|A|2I|B|C]]|D|@]|E|$]]|$1|16|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|2K|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|2L|8|@]|D|@]|E|$]]|$1|1B|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]]]

@sz3, funny enough today I had to do exactly what you were trying to achieve: 'load a specific CSS file only when a user access' a specific page. So I used the solution above.

But I am here to answer your last question: 'where exactly should I put the code. Any ideas?'

You were right including the code into the resolve, but you need to change a bit the format.

Take a look at the code below:

<pre><code>.when('/home', {
 title:'Home - ' + siteName,
 bodyClass: 'home',
 templateUrl: function(params) {
 return 'views/home.html';
 },
 controler: 'homeCtrl',
 resolve: {
 style : function(){
 /* check if already exists first - note ID used on link element*/
 /* could also track within scope object*/
 if( !angular.element('link#mobile').length){
 angular.element('head').append('&lt;link id="home" href="home.css" rel="stylesheet"&gt;');
 }
 }
 }
})
</code></pre>

I've just tested and it's working fine, it injects the html and it loads my 'home.css' only when I hit the '/home' route.

Full explanation can be found <a href="http://docs.angularjs.org/api/ngRoute.%24routeProvider" rel="noreferrer">here</a>, but basically resolve: should get an object in the format 

<pre><code>{
 'key' : string or function()
} 
</code></pre>

You can name the 'key' anything you like - in my case I called 'style'.

Then for the value you have two options:

<ul>
<li>If it's a string, then it is an alias for a service.</li>
<li>If it's function, then it is injected and the return value is treated
as the dependency.</li>
</ul>

The main point here is that the code inside the function is going to be executed before before the controller is instantiated and the $routeChangeSuccess event is fired.

Hope that helps.

blocks|key|2822637|text|我知道这个问题现在已经过时了，但在对这个问题的各种解决方案进行了大量研究后，我想我可能已经想出了一个更好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2822638|2822639|+更新1:自从发布这个答案以来，我已经将所有这些代码添加到了我发布到GitHub的一个简单服务中。存储库位于here。请随时查看它以获取更多信息。|blockquote|offset|length|style|BOLD|2822640|2822641|更新2:如果您所需要的只是为您的路线引入样式表的轻量级解决方案，那么这个答案非常棒。如果您想要一个更完整的解决方案来管理整个应用程序中的按需样式表，那么您可能需要查看Door3's+AngularCSS+project。它提供了更细粒度的功能。|2822642|2822643|如果将来有人对此感兴趣，这里是我想出来的：|2822644|1.为+<head>+元素创建自定义指令：|CODE|2822645|app.directive('head',+['$rootScope','$compile',
++++function($rootScope,+$compile){
++++++++return+{
++++++++++++restrict:+'E',
++++++++++++link:+function(scope,+elem){
++++++++++++++++var+html+=+'<link+rel="stylesheet"+ng-repeat="(routeCtrl,+cssUrl)+in+routeStyles"+ng-href="{{cssUrl}}"+/>';
++++++++++++++++elem.append($compile(html)(scope));
++++++++++++++++scope.routeStyles+=+{};
++++++++++++++++$rootScope.$on('$routeChangeStart',+function+(e,+next,+current)+{
++++++++++++++++++++if(current+&&+current.$$route+&&+current.$$route.css){
++++++++++++++++++++++++if(!angular.isArray(current.$$route.css)){
++++++++++++++++++++++++++++current.$$route.css+=+[current.$$route.css];
++++++++++++++++++++++++}
++++++++++++++++++++++++angular.forEach(current.$$route.css,+function(sheet){
++++++++++++++++++++++++++++delete+scope.routeStyles[sheet];
++++++++++++++++++++++++});
++++++++++++++++++++}
++++++++++++++++++++if(next+&&+next.$$route+&&+next.$$route.css){
++++++++++++++++++++++++if(!angular.isArray(next.$$route.css)){
++++++++++++++++++++++++++++next.$$route.css+=+[next.$$route.css];
++++++++++++++++++++++++}
++++++++++++++++++++++++angular.forEach(next.$$route.css,+function(sheet){
++++++++++++++++++++++++++++scope.routeStyles[sheet]+=+sheet;
++++++++++++++++++++++++});
++++++++++++++++++++}
++++++++++++++++});
++++++++++++}
++++++++};
++++}
]);|code-block|syntax|javascript|2822646|此指令执行以下操作：|2822647|ng-href.|2822648|It使用<link+/>编译(使用$compile)一个html字符串，该字符串使用scope.routeStyles为scope.routeStyles对象中的每个项目创建一组<link+/>标记，并将编译后的这组<link+/>元素附加到<head>标记。|unordered-list-item|2822649|
|2822650|然后使用$rootScope侦听'$routeChangeStart'事件。对于每个'$routeChangeStart'事件，它都会获取“当前”$$route对象(用户将要离开的路由)，并从<head>标记中删除其特定于部分的css文件。它还获取“下一个”$$route对象(用户将要转到的路径)，并将其任何特定于部分的css文件添加到<head>标记。|2822651|2822652|和compiled+<link+/>标记的ng-repeat部分根据添加到scope.routeStyles对象或从中删除的内容来处理所有特定于页面的样式表的添加和删除。|2822653|2822654|注意：这要求您的ng-app属性在<html>元素上，而不是在<body>或<html>__内的任何地方。|2822655|2.使用+$routeProvider**:**指定哪些样式表属于哪些路由|2822656|app.config(['$routeProvider',+function($routeProvider){
++++$routeProvider
++++++++.when('/some/route/1',+{
++++++++++++templateUrl:+'partials/partial1.html',+
++++++++++++controller:+'Partial1Ctrl',
++++++++++++css:+'css/partial1.css'
++++++++})
++++++++.when('/some/route/2',+{
++++++++++++templateUrl:+'partials/partial2.html',
++++++++++++controller:+'Partial2Ctrl'
++++++++})
++++++++.when('/some/route/3',+{
++++++++++++templateUrl:+'partials/partial3.html',
++++++++++++controller:+'Partial3Ctrl',
++++++++++++css:+['css/partial3_1.css','css/partial3_2.css']
++++++++})
}]);|2822657|此配置将一个自定义css属性添加到用于设置每个页面的路由的对象。该对象作为.$$route传递给每个'$routeChangeStart'事件。因此，在侦听'$routeChangeStart'事件时，我们可以获取指定的css属性，并根据需要添加/删除这些<link+/>标记。请注意，在路由上指定css属性是完全可选的，因为在'/some/route/2'示例中省略了该属性。如果路由没有css属性，则<head>指令将不会对该路由执行任何操作。还要注意，您甚至可以为每个路由提供多个特定于页面的样式表，如上面的'/some/route/3'示例所示，其中css属性是该路由所需样式表的相对路径数组。|2822658|3.你已经完成了这两件事，设置了所有需要的东西，在我看来，它用最干净的代码做到了这一点。|2822659|希望这对其他和我一样在这个问题上苦苦挣扎的人有所帮助。|2822660|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tennisgent/angular-route-styles|1|https://github.com/door3/angular-css|2|http://docs.angularjs.org/api/ng.$compile^0|0|0|1|4|1I|4|0|0|0|0|4|2B|Q|1|0|0|0|0|3|4|6|B|A|4|6|0|0|0|0|7|0|4|8|H|8|16|H|1O|H|2H|8|30|8|3D|6|H|8|2|0|0|4|A|G|J|16|J|21|7|2O|6|3L|7|4P|6|0|0|A|8|L|9|11|H|0|0|0|3|8|6|H|6|V|6|12|6|0|0|4|5|G|5|E|0|0|9|3|11|8|1E|J|26|J|32|3|3K|8|45|3|4K|F|5F|3|5M|6|75|F|7R|3|0|0|18|0|0|R|0^^$0|@$1|2|3|4|5|6|7|20|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|22|8|@$F|23|G|24|H|I]]|9|@$F|25|G|26|1|27]]|A|$]]|$1|J|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|29|8|@$F|2A|G|2B|H|I]]|9|@$F|2C|G|2D|1|2E]]|A|$]]|$1|M|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|2G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2H|8|@$F|2I|G|2J|H|I]|$F|2K|G|2L|H|I]|$F|2M|G|2N|H|I]|$F|2O|G|2P|H|R]]|9|@]|A|$]]|$1|S|3|T|5|U|7|2Q|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|2R|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2S|8|@$F|2T|G|2U|H|R]]|9|@]|A|$]]|$1|11|3|12|5|13|7|2V|8|@$F|2W|G|2X|H|R]|$F|2Y|G|2Z|H|R]|$F|30|G|31|H|R]|$F|32|G|33|H|R]|$F|34|G|35|H|R]|$F|36|G|37|H|R]|$F|38|G|39|H|R]]|9|@$F|3A|G|3B|1|3C]]|A|$]]|$1|14|3|15|5|6|7|3D|8|@]|9|@]|A|$]]|$1|16|3|17|5|13|7|3E|8|@$F|3F|G|3G|H|R]|$F|3H|G|3I|H|R]|$F|3J|G|3K|H|R]|$F|3L|G|3M|H|R]|$F|3N|G|3O|H|R]|$F|3P|G|3Q|H|R]|$F|3R|G|3S|H|R]]|9|@]|A|$]]|$1|18|3|15|5|6|7|3T|8|@]|9|@]|A|$]]|$1|19|3|1A|5|13|7|3U|8|@$F|3V|G|3W|H|R]|$F|3X|G|3Y|H|R]|$F|3Z|G|40|H|R]]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|41|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|42|8|@$F|43|G|44|H|I]|$F|45|G|46|H|R]|$F|47|G|48|H|R]|$F|49|G|4A|H|R]|$F|4B|G|4C|H|R]]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|4D|8|@$F|4E|G|4F|H|I]|$F|4G|G|4H|H|I]|$F|4I|G|4J|H|R]]|9|@]|A|$]]|$1|1G|3|1H|5|U|7|4K|8|@]|9|@]|A|$V|W]]|$1|1I|3|1J|5|6|7|4L|8|@$F|4M|G|4N|H|R]|$F|4O|G|4P|H|R]|$F|4Q|G|4R|H|R]|$F|4S|G|4T|H|R]|$F|4U|G|4V|H|R]|$F|4W|G|4X|H|R]|$F|4Y|G|4Z|H|R]|$F|50|G|51|H|R]|$F|52|G|53|H|R]|$F|54|G|55|H|R]|$F|56|G|57|H|R]|$F|58|G|59|H|R]]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|5A|8|@$F|5B|G|5C|H|I]]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|5D|8|@$F|5E|G|5F|H|I]]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|5G|8|@]|9|@]|A|$]]]|1P|$1Q|$5|1R|1S|1T|A|$1U|1V]]|1W|$5|1R|1S|1T|A|$1U|1X]]|1Y|$5|1R|1S|1T|A|$1U|1Z]]]]

I know this question is old now, but after doing a ton of research on various solutions to this problem, I think I may have come up with a better solution.
<blockquote>
UPDATE 1: Since posting this answer, I have added all of this code to a simple service that I have posted to GitHub. The repo is located <a href="https://github.com/tennisgent/angular-route-styles" rel="noreferrer">here</a>. Feel free to check it out for more info.
UPDATE 2: This answer is great if all you need is a lightweight solution for pulling in stylesheets for your routes. If you want a more complete solution for managing on-demand stylesheets throughout your application, you may want to checkout <a href="https://github.com/door3/angular-css" rel="noreferrer">Door3's AngularCSS project</a>. It provides much more fine-grained functionality.
</blockquote>
In case anyone in the future is interested, here's what I came up with:
1. Create a custom directive for the <code>&lt;head&gt;</code> element:
<pre><code>app.directive('head', ['$rootScope','$compile',
 function($rootScope, $compile){
 return {
 restrict: 'E',
 link: function(scope, elem){
 var html = '&lt;link rel=&quot;stylesheet&quot; ng-repeat=&quot;(routeCtrl, cssUrl) in routeStyles&quot; ng-href=&quot;{{cssUrl}}&quot; /&gt;';
 elem.append($compile(html)(scope));
 scope.routeStyles = {};
 $rootScope.$on('$routeChangeStart', function (e, next, current) {
 if(current &amp;&amp; current.$$route &amp;&amp; current.$$route.css){
 if(!angular.isArray(current.$$route.css)){
 current.$$route.css = [current.$$route.css];
 }
 angular.forEach(current.$$route.css, function(sheet){
 delete scope.routeStyles[sheet];
 });
 }
 if(next &amp;&amp; next.$$route &amp;&amp; next.$$route.css){
 if(!angular.isArray(next.$$route.css)){
 next.$$route.css = [next.$$route.css];
 }
 angular.forEach(next.$$route.css, function(sheet){
 scope.routeStyles[sheet] = sheet;
 });
 }
 });
 }
 };
 }
]);
</code></pre>
This directive does the following things:
<ol>
<li>It compiles (using <a href="http://docs.angularjs.org/api/ng.$compile" rel="noreferrer"><code>$compile</code></a>) an html string that creates a set of <code>&lt;link /&gt;</code> tags for every item in the <code>scope.routeStyles</code> object using <code>ng-repeat</code> and <code>ng-href</code>.</li>
<li>It appends that compiled set of <code>&lt;link /&gt;</code> elements to the <code>&lt;head&gt;</code> tag.</li>
<li>It then uses the <code>$rootScope</code> to listen for <code>'$routeChangeStart'</code> events. For every <code>'$routeChangeStart'</code> event, it grabs the &quot;current&quot; <code>$$route</code> object (the route that the user is about to leave) and removes its partial-specific css file(s) from the <code>&lt;head&gt;</code> tag. It also grabs the &quot;next&quot; <code>$$route</code> object (the route that the user is about to go to) and adds any of its partial-specific css file(s) to the <code>&lt;head&gt;</code> tag.</li>
<li>And the <code>ng-repeat</code> part of the compiled <code>&lt;link /&gt;</code> tag handles all of the adding and removing of the page-specific stylesheets based on what gets added to or removed from the <code>scope.routeStyles</code> object.</li>
</ol>
Note: this requires that your <code>ng-app</code> attribute is on the <code>&lt;html&gt;</code> element, not on <code>&lt;body&gt;</code> or anything inside of <code>&lt;html&gt;</code>.
2. Specify which stylesheets belong to which routes using the <code>$routeProvider</code>:
<pre><code>app.config(['$routeProvider', function($routeProvider){
 $routeProvider
 .when('/some/route/1', {
 templateUrl: 'partials/partial1.html', 
 controller: 'Partial1Ctrl',
 css: 'css/partial1.css'
 })
 .when('/some/route/2', {
 templateUrl: 'partials/partial2.html',
 controller: 'Partial2Ctrl'
 })
 .when('/some/route/3', {
 templateUrl: 'partials/partial3.html',
 controller: 'Partial3Ctrl',
 css: ['css/partial3_1.css','css/partial3_2.css']
 })
}]);
</code></pre>
This config adds a custom <code>css</code> property to the object that is used to setup each page's route. That object gets passed to each <code>'$routeChangeStart'</code> event as <code>.$$route</code>. So when listening to the <code>'$routeChangeStart'</code> event, we can grab the <code>css</code> property that we specified and append/remove those <code>&lt;link /&gt;</code> tags as needed. Note that specifying a <code>css</code> property on the route is completely optional, as it was omitted from the <code>'/some/route/2'</code> example. If the route doesn't have a <code>css</code> property, the <code>&lt;head&gt;</code> directive will simply do nothing for that route. Note also that you can even have multiple page-specific stylesheets per route, as in the <code>'/some/route/3'</code> example above, where the <code>css</code> property is an array of relative paths to the stylesheets needed for that route.
3. You're done
Those two things setup everything that was needed and it does it, in my opinion, with the cleanest code possible.
Hope that helps someone else who might be struggling with this issue as much as I was.

blocks|key|3035293|text|太棒了，谢谢！我只需要做一些调整来让它与ui-router一起工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3035294|++++var+app+=+app+%7C%7C+angular.module('app',+[]);

++++app.directive('head',+['$rootScope',+'$compile',+'$state',+function+($rootScope,+$compile,+$state)+{

++++return+{
++++++++restrict:+'E',
++++++++link:+function+($scope,+elem,+attrs,+ctrls)+{

++++++++++++var+html+=+'<link+rel="stylesheet"+ng-repeat="(routeCtrl,+cssUrl)+in+routeStyles"+ng-href="{{cssUrl}}"+/>';
++++++++++++var+el+=+$compile(html)($scope)
++++++++++++elem.append(el);
++++++++++++$scope.routeStyles+=+{};

++++++++++++function+applyStyles(state,+action)+{
++++++++++++++++var+sheets+=+state+?+state.css+:+null;
++++++++++++++++if+(state.parent)+{
++++++++++++++++++++var+parentState+=+$state.get(state.parent)
++++++++++++++++++++applyStyles(parentState,+action);
++++++++++++++++}
++++++++++++++++if+(sheets)+{
++++++++++++++++++++if+(!Array.isArray(sheets))+{
++++++++++++++++++++++++sheets+=+[sheets];
++++++++++++++++++++}
++++++++++++++++++++angular.forEach(sheets,+function+(sheet)+{
++++++++++++++++++++++++action(sheet);
++++++++++++++++++++});
++++++++++++++++}
++++++++++++}

++++++++++++$rootScope.$on('$stateChangeStart',+function+(event,+toState,+toParams,+fromState,+fromParams)+{

++++++++++++++++applyStyles(fromState,+function(sheet)+{
++++++++++++++++++++delete+$scope.routeStyles[sheet];
++++++++++++++++++++console.log('>>+remove+>>+',+sheet);
++++++++++++++++});

++++++++++++++++applyStyles(toState,+function(sheet)+{
++++++++++++++++++++$scope.routeStyles[sheet]+=+sheet;
++++++++++++++++++++console.log('>>+add+>>+',+sheet);
++++++++++++++++});
++++++++++++});
++++++++}
++++}
}]);|code-block|syntax|javascript|3035295|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Awesome, thank you!! Just had to make a few adjustments to get it working with ui-router:

<pre><code> var app = app || angular.module('app', []);

 app.directive('head', ['$rootScope', '$compile', '$state', function ($rootScope, $compile, $state) {

 return {
 restrict: 'E',
 link: function ($scope, elem, attrs, ctrls) {

 var html = '&lt;link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" /&gt;';
 var el = $compile(html)($scope)
 elem.append(el);
 $scope.routeStyles = {};

 function applyStyles(state, action) {
 var sheets = state ? state.css : null;
 if (state.parent) {
 var parentState = $state.get(state.parent)
 applyStyles(parentState, action);
 }
 if (sheets) {
 if (!Array.isArray(sheets)) {
 sheets = [sheets];
 }
 angular.forEach(sheets, function (sheet) {
 action(sheet);
 });
 }
 }

 $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

 applyStyles(fromState, function(sheet) {
 delete $scope.routeStyles[sheet];
 console.log('&gt;&gt; remove &gt;&gt; ', sheet);
 });

 applyStyles(toState, function(sheet) {
 $scope.routeStyles[sheet] = sheet;
 console.log('&gt;&gt; add &gt;&gt; ', sheet);
 });
 });
 }
 }
}]);
</code></pre>

blocks|key|2822696|text|@tennisgent的解决方案很棒。然而，我认为这是有一点限制的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2822697|Angular中的模块化和封装超越了路由。基于web正在走向基于组件的开发的方式，在指令中应用这一点也很重要。|2822698|正如您已经知道的，在Angular中，我们可以在页面和组件中包含模板(结构)和控制器(行为)。AngularCSS实现了最后一个缺失的部分:附加样式表(表示)。|offset|length|2822699|对于完整的解决方案，我建议使用AngularCSS。|2822700|2822701|支持Angular的ngRoute、UI路由器、指令、控制器和服务。|ordered-list-item|2822702|不需要在<html>标记中包含ng-app。当您在同一页面上运行多个应用程序时，这一点非常重要。您可以自定义样式表的注入位置:+head、body、自定义选择器、etc...|style|CODE|2822703|Supports预加载、持久化和缓存busting|2822704|Supports媒体查询，并通过matchMedia+|2822705|2822706|优化页面加载|2822707|https://github.com/door3/angular-css|2822708|下面是一些示例：|2822709|路由|BOLD|2822710|++$routeProvider
++++.when('/page1',+{
++++++templateUrl:+'page1/page1.html',
++++++controller:+'page1Ctrl',
++++++/*+Now+you+can+bind+css+to+routes+*/
++++++css:+'page1/page1.css'
++++})
++++.when('/page2',+{
++++++templateUrl:+'page2/page2.html',
++++++controller:+'page2Ctrl',
++++++/*+You+can+also+enable+features+like+bust+cache,+persist+and+preload+*/
++++++css:+{
++++++++href:+'page2/page2.css',
++++++++bustCache:+true
++++++}
++++})
++++.when('/page3',+{
++++++templateUrl:+'page3/page3.html',
++++++controller:+'page3Ctrl',
++++++/*+This+is+how+you+can+include+multiple+stylesheets+*/
++++++css:+['page3/page3.css','page3/page3-2.css']
++++})
++++.when('/page4',+{
++++++templateUrl:+'page4/page4.html',
++++++controller:+'page4Ctrl',
++++++css:+[
++++++++{
++++++++++href:+'page4/page4.css',
++++++++++persist:+true
++++++++},+{
++++++++++href:+'page4/page4.mobile.css',
++++++++++/*+Media+Query+support+via+window.matchMedia+API
+++++++++++*+This+will+only+add+the+stylesheet+if+the+breakpoint+matches+*/
++++++++++media:+'screen+and+(max-width+:+768px)'
++++++++},+{
++++++++++href:+'page4/page4.print.css',
++++++++++media:+'print'
++++++++}
++++++]
++++});|code-block|syntax|javascript|2822711|指令|2822712|myApp.directive('myDirective',+function+()+{
++return+{
++++restrict:+'E',
++++templateUrl:+'my-directive/my-directive.html',
++++css:+'my-directive/my-directive.css'
++}
});|2822713|此外，您可以在边缘情况下使用$css服务：|2822714|myApp.controller('pageCtrl',+function+($scope,+$css)+{

++//+Binds+stylesheet(s)+to+scope+create/destroy+events+(recommended+over+add/remove)
++$css.bind({+
++++href:+'my-page/my-page.css'
++},+$scope);

++//+Simply+add+stylesheet(s)
++$css.add('my-page/my-page.css');

++//+Simply+remove+stylesheet(s)
++$css.remove(['my-page/my-page.css','my-page/my-page2.css']);

++//+Remove+all+stylesheets
++$css.removeAll();

});|2822715|你可以在这里阅读更多关于AngularCSS的内容：|2822716|http://door3.com/insights/introducing-angularcss-css-demand-angularjs|2822717|entityMap|0|LINK|mutability|MUTABLE|url|1|2^0|0|0|1B|A|0|0|0|0|0|4|6|F|6|0|0|0|0|0|0|10|1|0|0|0|2|0|0|0|2|0|0|E|4|0|0|0|0|1X|2|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1X|8|@]|9|@$F|1Y|G|1Z|1|20]]|A|$]]|$1|H|3|I|5|6|7|21|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|23|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|24|8|@$F|25|G|26|P|Q]|$F|27|G|28|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|M|7|29|8|@]|9|@]|A|$]]|$1|T|3|U|5|M|7|2A|8|@]|9|@]|A|$]]|$1|V|3|-4|5|M|7|2B|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|2C|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2D|8|@]|9|@$F|2E|G|2F|1|2G]]|A|$]]|$1|10|3|11|5|6|7|2H|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2I|8|@$F|2J|G|2K|P|14]]|9|@]|A|$]]|$1|15|3|16|5|17|7|2L|8|@]|9|@]|A|$18|19]]|$1|1A|3|1B|5|6|7|2M|8|@$F|2N|G|2O|P|14]]|9|@]|A|$]]|$1|1C|3|1D|5|17|7|2P|8|@]|9|@]|A|$18|19]]|$1|1E|3|1F|5|6|7|2Q|8|@$F|2R|G|2S|P|Q]]|9|@]|A|$]]|$1|1G|3|1H|5|17|7|2T|8|@]|9|@]|A|$18|19]]|$1|1I|3|1J|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|2V|8|@]|9|@$F|2W|G|2X|1|2Y]]|A|$]]|$1|1M|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]]|1N|$1O|$5|1P|1Q|1R|A|$1S|Z]]|1T|$5|1P|1Q|1R|A|$1S|Z]]|1U|$5|1P|1Q|1R|A|$1S|1L]]]]

@tennisgent's solution is great. However, I think is a little limited.

Modularity and Encapsulation in Angular goes beyond routes. Based on the way the web is moving towards component-based development, it is important to apply this in directives as well.

As you already know, in Angular we can include templates (structure) and controllers (behavior) in pages and components. <a href="https://github.com/door3/angular-css" rel="noreferrer">AngularCSS</a> enables the last missing piece: attaching stylesheets (presentation).

For a full solution I suggest using AngularCSS. 

<ol>
<li>Supports Angular's ngRoute, UI Router, directives, controllers and services. </li>
<li>Doesn't required to have <code>ng-app</code> in the <code>&lt;html&gt;</code> tag. This is important when you have multiple apps running on the same page</li>
<li>You can customize where the stylesheets are injected: head, body, custom selector, etc...</li>
<li>Supports preloading, persisting and cache busting</li>
<li>Supports media queries and optimizes page load via matchMedia API</li>
</ol>

<a href="https://github.com/door3/angular-css" rel="noreferrer">https://github.com/door3/angular-css</a>

Here are some examples:

Routes

<pre><code> $routeProvider
 .when('/page1', {
 templateUrl: 'page1/page1.html',
 controller: 'page1Ctrl',
 /* Now you can bind css to routes */
 css: 'page1/page1.css'
 })
 .when('/page2', {
 templateUrl: 'page2/page2.html',
 controller: 'page2Ctrl',
 /* You can also enable features like bust cache, persist and preload */
 css: {
 href: 'page2/page2.css',
 bustCache: true
 }
 })
 .when('/page3', {
 templateUrl: 'page3/page3.html',
 controller: 'page3Ctrl',
 /* This is how you can include multiple stylesheets */
 css: ['page3/page3.css','page3/page3-2.css']
 })
 .when('/page4', {
 templateUrl: 'page4/page4.html',
 controller: 'page4Ctrl',
 css: [
 {
 href: 'page4/page4.css',
 persist: true
 }, {
 href: 'page4/page4.mobile.css',
 /* Media Query support via window.matchMedia API
 * This will only add the stylesheet if the breakpoint matches */
 media: 'screen and (max-width : 768px)'
 }, {
 href: 'page4/page4.print.css',
 media: 'print'
 }
 ]
 });
</code></pre>

Directives

<pre><code>myApp.directive('myDirective', function () {
 return {
 restrict: 'E',
 templateUrl: 'my-directive/my-directive.html',
 css: 'my-directive/my-directive.css'
 }
});
</code></pre>

Additionally, you can use the <code>$css</code> service for edge cases:

<pre><code>myApp.controller('pageCtrl', function ($scope, $css) {

 // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
 $css.bind({ 
 href: 'my-page/my-page.css'
 }, $scope);

 // Simply add stylesheet(s)
 $css.add('my-page/my-page.css');

 // Simply remove stylesheet(s)
 $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

 // Remove all stylesheets
 $css.removeAll();

});
</code></pre>

You can read more about AngularCSS here:

<a href="http://door3.com/insights/introducing-angularcss-css-demand-angularjs" rel="noreferrer">http://door3.com/insights/introducing-angularcss-css-demand-angularjs</a>

blocks|key|194089|text|如果你只需要将你的CSS应用于一个特定的视图，我在我的控制器中使用了这个方便的代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|194090|$("body").addClass("mystate");

$scope.$on("$destroy",+function()+{
++$("body").removeClass("mystate");+
});|code-block|syntax|javascript|194091|这将在状态加载时向我的body标记添加一个类，并在状态被破坏时删除它(例如，有人更改页面)。这解决了我的相关问题，即只需要将CSS应用于应用程序中的一个状态。|offset|length|style|CODE|194092|entityMap^0|0|0|B|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you only need your CSS to be applied to one specific view, I'm using this handy snippet inside my controller:

<pre><code>$("body").addClass("mystate");

$scope.$on("$destroy", function() {
 $("body").removeClass("mystate"); 
});
</code></pre>

This will add a class to my <code>body</code> tag when the state loads, and remove it when the state is destroyed (i.e. someone changes pages). This solves my related problem of only needing CSS to be applied to one state in my application.

blocks|key|2822773|text|‘'use’；angular.module('app')+.run(+'$rootScope'，'$state'，'$stateParams'，function($rootScope，$state，$stateParams)+{+$rootScope.$state+=+$state；$rootScope.$stateParams+=+$stateParams；})+.config(+[+'$stateProvider'，'$urlRouterProvider'，function($stateProvider，$urlRouterProvider)+{|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2822774|++++++++++++$urlRouterProvider
++++++++++++++++.otherwise('/app/dashboard');
++++++++++++$stateProvider
++++++++++++++++.state('app',+{
++++++++++++++++++++abstract:+true,
++++++++++++++++++++url:+'/app',
++++++++++++++++++++templateUrl:+'views/layout.html'
++++++++++++++++})
++++++++++++++++.state('app.dashboard',+{
++++++++++++++++++++url:+'/dashboard',
++++++++++++++++++++templateUrl:+'views/dashboard.html',
++++++++++++++++++++ncyBreadcrumb:+{
++++++++++++++++++++++++label:+'Dashboard',
++++++++++++++++++++++++description:+''
++++++++++++++++++++},
++++++++++++++++++++resolve:+{
++++++++++++++++++++++++deps:+[
++++++++++++++++++++++++++++'$ocLazyLoad',
++++++++++++++++++++++++++++function($ocLazyLoad)+{
++++++++++++++++++++++++++++++++return+$ocLazyLoad.load({
++++++++++++++++++++++++++++++++++++serie:+true,
++++++++++++++++++++++++++++++++++++files:+[
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/sparkline/jquery.sparkline.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.resize.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.pie.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.tooltip.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.orderBars.js',
++++++++++++++++++++++++++++++++++++++++'app/controllers/dashboard.js',
++++++++++++++++++++++++++++++++++++++++'app/directives/realtimechart.js'
++++++++++++++++++++++++++++++++++++]
++++++++++++++++++++++++++++++++});
++++++++++++++++++++++++++++}
++++++++++++++++++++++++]
++++++++++++++++++++}
++++++++++++++++})
++++++++++++++++.state('ram',+{
++++++++++++++++++++abstract:+true,
++++++++++++++++++++url:+'/ram',
++++++++++++++++++++templateUrl:+'views/layout-ram.html'
++++++++++++++++})
++++++++++++++++.state('ram.dashboard',+{
++++++++++++++++++++url:+'/dashboard',
++++++++++++++++++++templateUrl:+'views/dashboard-ram.html',
++++++++++++++++++++ncyBreadcrumb:+{
++++++++++++++++++++++++label:+'test'
++++++++++++++++++++},
++++++++++++++++++++resolve:+{
++++++++++++++++++++++++deps:+[
++++++++++++++++++++++++++++'$ocLazyLoad',
++++++++++++++++++++++++++++function($ocLazyLoad)+{
++++++++++++++++++++++++++++++++return+$ocLazyLoad.load({
++++++++++++++++++++++++++++++++++++serie:+true,
++++++++++++++++++++++++++++++++++++files:+[
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/sparkline/jquery.sparkline.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.resize.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.pie.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.tooltip.js',
++++++++++++++++++++++++++++++++++++++++'lib/jquery/charts/flot/jquery.flot.orderBars.js',
++++++++++++++++++++++++++++++++++++++++'app/controllers/dashboard.js',
++++++++++++++++++++++++++++++++++++++++'app/directives/realtimechart.js'
++++++++++++++++++++++++++++++++++++]
++++++++++++++++++++++++++++++++});
++++++++++++++++++++++++++++}
++++++++++++++++++++++++]
++++++++++++++++++++}
++++++++++++++++})
+++++++++++++++++);|code-block|syntax|javascript|2822775|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

'use strict';
angular.module('app')
 .run(
 [
 '$rootScope', '$state', '$stateParams',
 function($rootScope, $state, $stateParams) {
 $rootScope.$state = $state;
 $rootScope.$stateParams = $stateParams;
 }
 ]
 )
 .config(
 [
 '$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {

<pre><code> $urlRouterProvider
 .otherwise('/app/dashboard');
 $stateProvider
 .state('app', {
 abstract: true,
 url: '/app',
 templateUrl: 'views/layout.html'
 })
 .state('app.dashboard', {
 url: '/dashboard',
 templateUrl: 'views/dashboard.html',
 ncyBreadcrumb: {
 label: 'Dashboard',
 description: ''
 },
 resolve: {
 deps: [
 '$ocLazyLoad',
 function($ocLazyLoad) {
 return $ocLazyLoad.load({
 serie: true,
 files: [
 'lib/jquery/charts/sparkline/jquery.sparkline.js',
 'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
 'lib/jquery/charts/flot/jquery.flot.js',
 'lib/jquery/charts/flot/jquery.flot.resize.js',
 'lib/jquery/charts/flot/jquery.flot.pie.js',
 'lib/jquery/charts/flot/jquery.flot.tooltip.js',
 'lib/jquery/charts/flot/jquery.flot.orderBars.js',
 'app/controllers/dashboard.js',
 'app/directives/realtimechart.js'
 ]
 });
 }
 ]
 }
 })
 .state('ram', {
 abstract: true,
 url: '/ram',
 templateUrl: 'views/layout-ram.html'
 })
 .state('ram.dashboard', {
 url: '/dashboard',
 templateUrl: 'views/dashboard-ram.html',
 ncyBreadcrumb: {
 label: 'test'
 },
 resolve: {
 deps: [
 '$ocLazyLoad',
 function($ocLazyLoad) {
 return $ocLazyLoad.load({
 serie: true,
 files: [
 'lib/jquery/charts/sparkline/jquery.sparkline.js',
 'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
 'lib/jquery/charts/flot/jquery.flot.js',
 'lib/jquery/charts/flot/jquery.flot.resize.js',
 'lib/jquery/charts/flot/jquery.flot.pie.js',
 'lib/jquery/charts/flot/jquery.flot.tooltip.js',
 'lib/jquery/charts/flot/jquery.flot.orderBars.js',
 'app/controllers/dashboard.js',
 'app/directives/realtimechart.js'
 ]
 });
 }
 ]
 }
 })
 );
</code></pre>

What is the proper/accepted way to use separate stylesheets for the various views my application uses?

Currently I'm placing a link element in the view/partial's html at the top but I've been told this is bad practice even though all modern browsers support it but I can see why it's frowned upon.

The other possibility is placing the separate stylesheets in my index.html's <code>head</code> but I would like it to only load the stylesheet if its view is being loaded in the name of performance.

Is this bad practice since styling won't take effect until after the css is loaded form the server, leading to a quick flash of unformatted content in a slow browser? I have yet to witness this although I'm testing it locally.

Is there a way to load the CSS through the object passed to Angular's <code>$routeProvider.when</code>?

Thanks in advance!

How to include view/partial specific styling in AngularJS

服务器

路由器

路由

GitHub

对于我的应用程序使用的各种视图，使用单独的样式表的正确/可接受的方式是什么？目前，我在view/partial的html顶部放置了一个link元素，但有人告诉我这是一种糟糕的做法，尽管所有现代浏览器都支持它，但我明白为什么它不受欢迎。另一种可能是将单独的样式表放在index.html的head中，但我希望它只在以per...

问如何在AngularJS中包含视图/局部特定样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS中包含视图/局部特定样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS中包含视图/局部特定样式
EN