<div ng-controller='ReportCtrl as ctrl'>
<bar-chart
series="ctrl.series"
y-scale="ctrl.yScale"
>
</bar-chart>
</div>
Sometimes, great!
ngModelController FTW!
No giant files!
But...
Our most ambitious plans were thwarted
Web-components selfishly horde <DOM>
Remember collaboration?
A dark night of the soul
How are newbies building cooler apps?
An unsettling realisation
An example
Editable chart
x/y plot
editable data
update on change
Ok, we've done that before
Chart component
Editing component
BORING!
Users don't care about components
...they don't even see them
PROGRAMMER VISION!
Where the ambitious...
...is sacrificed to optimise the average
Users don't care about 'best practice'
'Best practice' should be making things easier
...not limiting you to easy things
Did I want to be an enterprise architect?!
A new quest
No more programmer vision
Direct access
Show don't tell
But <form> + <svg>?
How will you validate?
Are you casting aside ng?
Writing HTML with D3?!
// the horror
var form = d3.select("#form-root")
.append("form")
.on("submit", handleSubmit)
form.append("input")
.attr("type", "range")
.attr("required", true)
form.append("input")
.attr("type", "number")
.attr("required", true)
// ... and on, and on
I needed ng & d3
Beat the tools into submission!
d3.angularize()
Flip the hierarchy!
On demand
editedSelection
.angularize(function(d, i) {
return {
controller: "ComplexFormCtrl",
locals: {
// provide Ctrl a way to hand back to D3
$edited: edited,
},
templateUrl: "editors/complexForm.html",
controllerAs: "ctrl",
injector: "app",
modules: ["app", "someFormModule"],
}
})