Skip to content

Instantly share code, notes, and snippets.

@geddski
Created November 10, 2016 23:01
Show Gist options
  • Save geddski/02eb46711eda1ee9456fc4aa292c395e to your computer and use it in GitHub Desktop.
Save geddski/02eb46711eda1ee9456fc4aa292c395e to your computer and use it in GitHub Desktop.
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