12

I'm looking for the best way to manage the includes of css files,

I've found a great answer : https://stackoverflow.com/a/20404559/3163545 But this is working only with rootProvider.

So how to do something like this with 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']
        })
}]);

Thank you very much :)

Community
  • 1
  • 1
user3163545
  • 245
  • 2
  • 3
  • 9
  • Keep in mind that it's generally best practice to combine and minify all your css files into one compact file that would only need to be downloaded once. This is greatly more performant than downloading many small files because each request has it's own overhead aside from just downloading the file. – m59 Sep 08 '14 at 22:35

2 Answers2

11

This module might help you: https://github.com/manuelmazzuola/angular-ui-router-styles

  1. Install it with Bower via bower install angular-ui-router-styles --save

  2. Ensure that your application module specifies uiRouterStyles as a dependency: angular.module('myApplication', ['uiRouterStyles'])

  3. Add css file(s) relative path to the state data object

.state('state1', {
    url: '/state',
    controller: 'StateCtrl',
    templateUrl: 'views/my-template.html',
    data: {
        css: 'styles/some-overrides.css'
    }
})
Matthew
  • 146
  • 2
  • 9
Pedro Semeano
  • 163
  • 1
  • 9
1

You may also use oclazyload for this purpose. It works with .js and .css files. From it's documentation:

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

For more details, visit the link below:

oclazyload - di

Midhun KM
  • 1,647
  • 1
  • 21
  • 31
  • angular-ui-router-styles solution will work better if you need to apply specific CSS to current $routeProvider.state only. And where ever you are leaving this state it removes this CSS from browser. – Renat Gatin Feb 07 '18 at 21:10