angular-vdom
angular-vdom allows you to have ultra high performance rendering with virtual-dom components angular 1.5. Under the hood, anguar-vdom takes uses the new .component() lifecycle hooks and works perfectly with stateless components. Live Demo!
huh?
angular-vdom uses virtual-dom and main-loop, take a look at the source, it's super straight forward. Why does angular need a virtual-dom implementation? You can check out the performance gains over here. This works great on pages that require huge lists or tables, with 60 FPS scrolling and instant patching
Usage
// app.jsvar h = var ngVirtualComponent = var virtualComponent = moduleexports = name // Doesn't need to be hyperscript as long as we return a VTree { return }
// index.html
Usage with ui-router too!
var virtualComponent = angular
API
angular-vdom exports a function that takes two params:
ngVirtualComponent(render, options)
Render -> fn
function that returns a VTree. I use hyperscript but you can use hyperx and even jsx. The render function is called with a state
object, that contains your bindings data
Options -> {object}
Default values for configuring the angular component. When a binded value changes it will trigger an $onChange() event, which will then rAF and render
Using controllerAs?
Just use the attribute
<virtual-component controller-as="vd" message="vd.message"></virtual-component>
TODO
- Emit events for angular controller consumption
Building
npm i && npm run build
cd example/
open index.html