Angular 1 component helper for rendering components directly
|
/** |
|
* A sample Angular 1 component, created using the component helper above. |
|
* Uses Aphrodite for CSS |
|
*/ |
|
|
|
import component from './component'; |
|
import { StyleSheet, css } from 'aphrodite'; |
|
|
|
const styles = StyleSheet.create({ |
|
avatar: { |
|
background: 'blue' |
|
} |
|
}); |
|
|
|
const template = ` |
|
<div class="${css(styles.avatar)}">avatar yo</div> |
|
`; |
|
|
|
export default class Avatar { |
|
constructor(){} |
|
} |
|
|
|
// register this as an Angular component |
|
// __filename variable becomes the full path to this component, which makes for a perfect unique component name |
|
component({controller: Avatar, template: template, bindings: {}}, __filename); |
|
|
|
export default function controller(obj, filename){ |
|
const nameParts = filename |
|
.replace('-', '') |
|
.replace('.js', '') |
|
.toLowerCase() |
|
.split('/'); |
|
|
|
const tagName = nameParts.reduce((prev, next) => `${prev}-${next}`); |
|
|
|
const componentName = nameParts.reduce((prev, next) => { |
|
return prev + next.charAt(0).toUpperCase() + next.slice(1); |
|
}); |
|
|
|
obj.controller.toString = () => tagName; |
|
|
|
angular.module('app').component(componentName, obj); |
|
} |
|
/** |
|
* Showing how to use the component directly |
|
*/ |
|
|
|
import Avatar from './Avatar'; |
|
|
|
const template = ` |
|
<${Avatar}/> |
|
`; |
|
|
|
|