使用ui-router包含特定css/js文件的最佳方法

Question

我正在寻找管理css文件包含的最佳方法,

我找到了一个很好的答案:https: //stackoverflow.com/a/20404559/3163545但这只适用于rootProvider.

那么如何用stateProvider做这样的事情:

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']
        })
}]);

非常感谢你 :)

Answer 1

这个模块可能会帮助你:https://github.com/manuelmazzuola/angular-ui-router-styles

1. 用Bower via安装它 bower install angular-ui-router-styles --save

2. 确保您的应用程序模块将uiRouterStyles指定为依赖项: angular.module('myApplication', ['uiRouterStyles'])

3. 添加css文件相对于状态数据对象的路径

.state('state1', {
    url: '/state',
    controller: 'StateCtrl',
    templateUrl: 'views/my-template.html',
    data: {
        css: 'styles/some-overrides.css'
    }
})