Using Aphrodite in Angular

app.html

<main>
  <h1 class="title">Hello from Angular-Aphrodite !</h1>

  <!-- Images (and assets) are parsed and loaded from within the public directory -->
  <img src="/img/logo.png">

  <div>
      <span ng-class="app.css(app.styles.red)">
          This is red.
      </span>
      <span ng-class="app.css(app.styles.hover)">
          This turns red on hover.
      </span>
      <span ng-class="app.css(app.styles.small)">
          This turns red when the browser is less than 600px width.
      </span>
      <span ng-class="app.css(app.styles.red, app.styles.blue)">
          This is blue.
      </span>
      <span ng-class="app.css(app.styles.blue, app.styles.small)">
          This is blue and turns red when the browser is less than
          600px width.
      </span>
  </div>

</main>
<footer>
  <a ng-href="{{app.url}}">Angular using Aphrodite for Styles</a>
</footer>

AppController.js

import angular from 'angular';
import { StyleSheet, css } from 'aphrodite';

import '../style/app.css';

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

    blue: {
        backgroundColor: 'blue'
    },

    hover: {
        ':hover': {
            backgroundColor: 'red'
        }
    },

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

class AppCtrl {
  constructor() {
    this.url = 'https://github.com/Khan/aphrodite';
  }

  get styles() { return styles; }

  css(...styles) {
    return css(...styles);
  }
}