angular-vdom v0.5.0
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.js
var h = require('virtual-dom/h')
var ngVirtualComponent = require('angular-vdom')
var virtualComponent = ngVirtualComponent(render, {bindings: {message: '<'}})
module.exports = require('angular')
.module('app', [])
.component('virtualComponent', virtualComponent)
.name
// Doesn't need to be hyperscript as long as we return a VTree
function render (state) {
return h('div', state.message)
}
// index.html
<div ng-app="app">
<virtual-component message="Hello World!"></virtual-component>
</div>
Usage with ui-router too!
var virtualComponent = ngVirtualComponent(render, {bindings: {message: '<'}})
angular
.module('app', [])
.component('virtualComponent', virtualComponent)
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('virtual', {
url: '/virtual',
template: '<virtual-component controller-as="vd" message="vd.message"></virtual-component>',
controllerAs: 'vd',
controller: function () {
this.message = 'Hello World'
}
})
}])
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