2

I am struggling with tweaking my Angular JS application.

There is the whole application where in the end I'd like to use my app.css file as a style sheet. So each state like:

  • domain/#/articles
  • domain/#/articles/1
  • domain/#/users
  • domain/#/users/1

will use this file.

However I do have a cms section in my application (i.e. domain/#/cms/articles and I'd like to use completely different styles there (nothing in common with app.css). Is there anything I could do to easily load cms.css for selected states and do NOT load app.css there?

My initial idea was to add two style sheets in my index.html file with either ng-if or ng-show for each but that's definitely not a good approach (most likely it wouldn't even work).

SirKometa
  • 1,857
  • 3
  • 16
  • 26
  • use injecting CSS. and depending on page load css dynamically.. add caching for CSS. https://medium.com/opinionated-angularjs/angular-dynamically-injecting-css-file-using-route-resolve-and-promises-7bfcb8ccd05b#.fetyejbmn – murli2308 Nov 23 '15 at 14:04

1 Answers1

0

What about assigning a top-level class to each page, and then nesting the styles that are unique to that page within it? This is made even simpler if you're using a CSS preprocessor like LESS or SASS.

For example, you'd have something like this:

<div class='main-page' ng-controller='main'>
    <p>Some text</p>
    <p>Some more text</p>
</div>

<div class='cms-page' ng-controller='cms'>
    <p>Some CMS text</p>
    <p>Some more CMS text</p>
</div>

And then in your CSS:

.main-page {
//main styles here
    background-color: black;

    p {
        color: white;
    }
}

.cms-page {
//cms styles here
    background-color: red;

    p {
        color: blue;
    }
}

Extrapolate that idea as needed, but now you don't need to worry about reusing class names or having styles on one page conflict with styles on another, as everything is nested safely in its page class.

For global styles, of course, you just leave them out of the top-level page classes.

jmknoll
  • 1,046
  • 5
  • 11
  • 30
  • This approach would require to load all the styles at once if I am not mistaken. Also in my situation there are no "global" styles (at least there is nothing in common between both style sheets). – SirKometa Nov 23 '15 at 14:18
  • Ah, sorry. I didn't notice that you don't want to load all the styles. For route-based styles, you could take a look at what this guy has done: http://stackoverflow.com/questions/15193492/how-to-include-view-partial-specific-styling-in-angularjs He's using angular router, but I don't see any reason it wouldn't work for ui-router. – jmknoll Nov 23 '15 at 14:36
  • I've seen his idea and will try to make it a friend with a gulp inject :), not sure how it will work though. – SirKometa Nov 23 '15 at 14:41