Лучший способ включить конкретные файлы css/js с помощью ui-router

Я ищу лучший способ управления вложениями css файлов,

Я нашел отличный ответ: qaru.site/info/6148/... Но это работает только с 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']
        })
}]);

Большое спасибо:)

Ответы

Ответ 1

Этот модуль может помочь вам: https://github.com/manuelmazzuola/angular-ui-router-styles

  • Установите его с помощью Bower через 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'
    }
})

Ответ 2

Вы также можете использовать oclazyload для этой цели. Он работает с файлами .js и .css. Из него документация:

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

Для получения дополнительной информации перейдите по ссылке ниже:

oclazyload - di