为我的应用程序使用的各种视图使用单独的样式表的正确/可接受的方式是什么？
目前我在顶部的视图/部分的 html 中放置了一个链接元素，但有人告诉我这是不好的做法，即使所有现代浏览器都支持它，但我明白为什么它不受欢迎。
另一种可能性是将单独的样式表放在我的 index.html 中，head但我希望它仅在以性能的名义加载其视图时才加载样式表。
这是不好的做法，因为样式直到从服务器加载css后才会生效，导致在慢速浏览器中快速闪烁未格式化的内容？尽管我在本地进行测试，但我还没有看到这一点。
有没有办法通过传递给 Angular 的对象来加载 CSS $routeProvider.when？
提前致谢！
我知道这个问题现在已经很老了，但是在对这个问题的各种解决方案进行了大量研究之后，我想我可能想出了一个更好的解决方案。
更新 1：自从发布此答案以来，我已将所有这些代码添加到我已发布到 GitHub 的简单服务中。回购位于此处。随时查看以获取更多信息。
更新 2：如果您只需要一个轻量级的解决方案来为您的路线引入样式表，那么这个答案非常好。如果您想要一个更完整的解决方案来管理整个应用程序中的按需样式表，您可能需要查看Door3 的 AngularCSS 项目。它提供了更细粒度的功能。
如果将来有人感兴趣，这就是我想出的：
<head>1. 为元素创建自定义指令：
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;
});
}
});
}
};
}
]);
该指令执行以下操作：
$compile创建一组标签。<link />scope.routeStylesng-repeatng-href<link />元素集附加到<head>标签。$rootScope来监听'$routeChangeStart'事件。对于每个'$routeChangeStart'事件，它都会抓取“当前”$$route对象（用户即将离开的路线）并从<head>标签中删除其部分特定的 css 文件。它还抓取“下一个”$$route对象（用户将要前往的路线）并将其任何部分特定的 css 文件添加到<head>标签中。ng-repeat编译标记的部分<link />根据添加到对象或从scope.routeStyles对象中删除的内容来处理页面特定样式表的所有添加和删除。注意： 这要求您的ng-app属性在<html>元素上，而不是<body>在<html>.
2. 使用 : 指定哪些样式表属于哪些路由$routeProvider：
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']
})
}]);
此配置将自定义css属性添加到用于设置每个页面的路由的对象。该对象'$routeChangeStart'作为.$$route. 因此，在监听'$routeChangeStart'事件时，我们可以获取css我们指定的属性并<link />根据需要附加/删除这些标签。请注意，css在路由上指定属性是完全可选的，因为它在示例中被省略了'/some/route/2'。如果路由没有css属性，该<head>指令将对该路由不做任何事情。另请注意，您甚至可以在每个路由中拥有多个特定于页面的样式表，如上面的'/some/route/3'示例所示，其中css属性是该路由所需样式表的相对路径数组。
3. 你已经完成了 这两件事设置了所有需要的东西，并且在我看来，它使用了最干净的代码。
希望能帮助其他可能像我一样在这个问题上苦苦挣扎的人。
@tennisgent 的解决方案很棒。不过，我觉得有点局限。
Angular 中的模块化和封装超越了路由。基于 Web 正在朝着基于组件的开发方式发展，在指令中应用这一点也很重要。
如您所知，在 Angular 中，我们可以在页面和组件中包含模板（结构）和控制器（行为）。AngularCSS启用了最后一个缺失的部分：附加样式表（演示文稿）。
对于完整的解决方案，我建议使用 AngularCSS。
ng-app在<html>标签中。当您在同一页面上运行多个应用程序时，这一点很重要https://github.com/door3/angular-css
这里有些例子：
路线
$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'
}
]
});
指令
myApp.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
此外，您可以将该$css服务用于边缘情况：
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();
});
您可以在此处阅读有关 AngularCSS 的更多信息：
http://door3.com/insights/introducing-angularcss-css-demand-angularjs
可以将新样式表附加到$routeProvider. 为简单起见，我使用字符串，但也可以创建新的链接元素，或者为样式表创建服务
/* 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
@sz3，今天很有趣，我必须完全按照您的要求做：'仅当用户访问'特定页面时才加载特定的 CSS 文件。所以我使用了上面的解决方案。
但我来这里是为了回答你的最后一个问题：'我应该把代码放在哪里。有什么想法吗？
将代码包含在resolve中是对的，但是您需要稍微更改格式。
看看下面的代码：
.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('<link id="home" href="home.css" rel="stylesheet">');
}
}
}
})
我刚刚测试过，它工作正常，它注入了 html，并且只有在我点击 '/home' 路由时才会加载我的 'home.css'。
完整的解释可以在这里找到，但基本上解决：应该得到一个格式的对象
{
'key' : string or function()
}
你可以给' key '命名任何你喜欢的名字——在我的例子中，我称之为' style '。
然后对于值，您有两个选择：
如果它是一个字符串，那么它就是一个服务的别名。
如果它是function，则将其注入并将返回值视为依赖项。
这里的要点是，函数内部的代码将在控制器被实例化并触发 $routeChangeSuccess 事件之前执行。
希望有帮助。
太棒了，谢谢你！！只需进行一些调整即可使其与 ui-router 一起使用：
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 = '<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);
});
});
}
}
}]);
如果您只需要将 CSS应用于一个特定的视图，我将在控制器中使用这个方便的代码段：
$("body").addClass("mystate");
$scope.$on("$destroy", function() {
$("body").removeClass("mystate");
});
这将body在状态加载时向我的标签添加一个类，并在状态被破坏时将其删除（即有人更改页面）。这解决了我在我的应用程序中只需要将 CSS 应用于一种状态的相关问题。
'使用严格'; angular.module('app') .run( [ '$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { $rootScope.$state = $state; $rootScope .$stateParams = $stateParams; } ] ) .config( [ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$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'
]
});
}
]
}
})
);