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}/> | |
`; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment