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

我正在寻找管理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']
        })
}]);

非常感谢你：）

8000

2017-08-08 08:26

起源

请记住，将所有css文件组合并缩小为一个只需要下载一次的压缩文件通常是最佳做法。这比下载许多小文件更有效，因为除了下载文件之外，每个请求都有自己的开销。 - m59

答案:

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

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

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

添加css文件相对于状态数据对象的路径
.state('state1', {
    url: '/state',
    controller: 'StateCtrl',
    templateUrl: 'views/my-template.html',
    data: {
        css: 'styles/some-overrides.css'
    }
})

2017-11-20 15:07

这也适用于JS文件吗？例如加载一个jquery文件？ - user3362364

我认为这个模块只适用于stylessheets，而不适用于js。 - semeano

你也可以使用 oclazyload 以此目的。它适用于.js和.css文件。从它的文档：

angular.module('MyModule', ['pascalprecht.translate', [
  '/components/TestModule/TestModule.js',
  '/components/bootstrap/css/bootstrap.css',
  '/components/bootstrap/js/bootstrap.js'
]]);

有关更多详细信息，请访问以下链接：

oclazyload - di

2017-10-11 09:54

如果您只需要将特定的CSS应用于当前的$ routeProvider.state，angular-ui-router-styles解决方案将更好地工作。无论你离开这个状态，它都会从浏览器中删除这个CSS。 - Renat Gatin

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

答案:

热门问题

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