Is there any way to lazy load CSS files in Angular?

Question

I'm using AngularJS. Up to this point, I've loaded CSS that is specific to my partials by linking it in at the top of the partial:

<!-- File: some_partial.html -->
<link rel="stylesheet" href="link/to/some_partial.css" />
<!-- Rest of partial code here -->

This doesn't feel right. The CSS isn't linked in the <head> (making it non-standard), and every once in awhile, the styles don't actually get applied to the partial.

What is the correct way to lazy load CSS in Angular, deferring until the partial is actually needed?

can you provide a demo link to where this problem is occurring? How do you mean the css isn't linked in the head? — Chibueze Opata, Jan 24 '13 at 18:50
when you load new CSS into the DOM you will cause all of the CSS tables to recalculate. — jdavid.net, Jan 29 '13 at 20:11
See http://stackoverflow.com/questions/15193492/how-to-include-view-partial-specific-styling-in-angularjs for a nicer answer. — Marc Durdin, Aug 25 '14 at 05:37

score 1 · Answer 1 · answered Feb 05 '13 at 05:22

May I suggest introducing a service that keeps track of the styling needs of your various controllers. It would indeed have its own little controller outputting the actual CSS files/paths into the head on basis of what other components request. This service would be injected into other components so that these can call methods to express what styling they're interested in. Expressing the styling they're interested in may be done in terms of the actual CSS files/paths or being abstracted away into something like "need support for tables, alerts, custom branding, etc.".

Is there any way to lazy load CSS files in Angular?

1 Answers1