CSS on-demand for AngularJS

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

{{ pageTitle }} view from ngRoute

How it works

AngularCSS listens for route (or states) change events, adds the CSS defined on the current route and removes the CSS from the previous route. 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. 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 ngRoute and a few custom directives.
In the following code, each page and directive defines CSS via this API.

For a demo featuring UI Router click here.