Awesome
nanocomponent-adapters/angularjs
small wrapper around nanocomponents for angular 1.x
usage
wrappedComponent = toAngularjs(Component, name, attrs, angular)
registers a new module with the given Angular instance and returns a string of the module's name.
- Component: A nanocomponent constructor
- name: camelCase name for the component
- attrs: a list of the arguments passed to
Component#render
- angular: angular instance
example
var angular = require('angular')
var toAngularjs = require('nanocomponent-adapters/angularjs')
var Nanocomponent = require('nanocomponent')
var html = require('bel')
class Button extends Nanocomponent {
constructor () {
super()
this.color = null
}
handleClick () {
console.log('choo choo!')
}
createElement ({color}) {
this.color = color
return html`
<button onclick=${this.handleClick} style="background-color: ${color}">
Click Me
</button>
`
}
update ({color}) {
return color !== this.color
}
}
var customButton = toAngularjs(Button, 'customButton', ['color'], angular)
angular
.module('my-app', [ customButton ])
.bootstrap(body, 'my-app')
in your template:
<custom-button color="$ctrl.color"></custom-button>