This is a simple module for AngularJS that provides the ability to have route-specific CSS stylesheets, by integrating with Angular uiRouter.
What does it do?
It allows you to declare partial-specific or route-specific styles for your app using
$stateProvider service. This solves that problem by allowing you to do something like this:
state1.state12 will have the parent file
styles/custom-state1-override.css injected; redefine the css array for override it.
How to install:
Install it with Bower via
bower install angular-ui-router-styles --save
Ensure that your application module specifies
uiRouterStylesas a dependency:
Add css file(s) relative path to the state data object
Things to notice: * Specifying a css property on the route is completely optional. If the state doesn't have a css property, the service will simply do nothing for that route. * You can even have multiple page-specific stylesheets per state, where the css property is an array of relative paths to the stylesheets needed for that route. * If a parent state exists the data object is inherited.
This directive does the following things:
- It compiles (using
$compile) an html string that creates a set of tags for every item in the
data.cssstate property using
- It appends that compiled set of
<link />elements to the
- It then uses the
$rootScopeto listen for
'$stateChangeStart'events. For every
'$stateChangeStart'event, it cleans all css appended before and adds the new css file(s) to the
<head>tag if there are any.