Angular-Aphrodite: Angular bindings for Aphrodite

Installation

npm install --save angular aphrodite angular-aphrodite

Usage

You can use the binding to Aphrodite via a ng-class filter, or as a css attribute directive.

Considering an Aphrodite StyleSheet that looks like this:

$scope.styles = StyleSheet.create({
  red: {
    backgroundColor: 'red'
  },

  blue: {
    backgroundColor: 'blue'
  },

  small: {
    '@media (max-width: 600px)': {
        backgroundColor: 'red',
      }
  }
});

ng-class | css filter

<span ng-class="styles.red | css">This is red.</span>
<span ng-class="[styles.blue, styles.small] | css">This is blue and small.</span>

css attribute directive

<span css="styles.red">This is red.</span>
<span css="[styles.blue, styles.small]">This is blue and small.</span>

Template Style Definitions

Alternatively, you can define the styles in the template instead of the JavaScript. If you choose to do it this way, you must use JSON syntax:

<stylesheet name="templateStyle">
  {
    "red": {
      "backgroundColor": "red"
    }
  }
</stylesheet>

<span ng-class="templateStyle.red | css">red stuff</span>
<span css="templateStyle.red">red stuff</span>

CommonJS Bootstrapping

JS:

import angular from 'angular';
import {StyleSheet} from 'aphrodite';
import angularAphrodite from 'angular-aphrodite';

var styles = StyleSheet.create({
  // styles
});

angular.module('app', [angularAphrodite]);

UMD Bootstrapping

HTML:

<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/aphrodite/dist/aphrodite.umd.js"></script>
<script type="text/javascript" src="node_modules/angular-aphrodite/dist/angular-aphrodite.umd.js"></script>

JS:

var styles = aphrodite.StyleSheet.create({
  // styles
});

angular.module('app', ['angular-aphrodite']);

Examples

• UMD
• CommonJS