CSS on-demand for AngularJS

Optimize the presentation layer of your single-page apps by dynamically injecting stylesheets as needed.

{{ pageTitle }} view from UI Router

How it works

AngularCSS listens for states (or route) change events, adds the CSS defined on the current state and removes the CSS from the previous state. It also works with directives in the same fashion with the compile and scope destroy events.

To illustrate this behavior, each page and directive is defining CSS via this API. The main header changes color based on the current page CSS. Each directive's background color comes from the CSS defined in the Directive Definition Object (DDO). On page change, the CSS defined changes accordingly. The CSS from each state is overriding its directive's background opacity. See the app source code below for more details.


What's in scope?

What's in the head tag?

{{ 'Demo Source Code' }}

This demo app is running the code below. It uses Angular's UI Router and a few custom directives.
In the following code, each page and directive defines CSS via this API.

For a demo featuring ngRoute click here.