{% include JB/setup %}
Angular display system treats output as a view template for AngularJS. It compiles templates and displays them inside of Apache Zeppelin. Zeppelin provides a gateway between your interpreter and your compiled AngularJS view templates. Therefore, you can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.
To use angular display system, you should start with %angular
.
Since name
is not defined, Hello {{name}}
will display Hello
.
Please Note: Display system is backend independent.
Through ZeppelinContext, you can bind / unbind variables to AngularJS view. Currently, it only works in Spark Interpreter ( scala ).
// bind my 'object' as angular scope variable 'name' in current notebook. z.angularBind(String name, Object object) // bind my 'object' as angular scope variable 'name' in all notebooks related to current interpreter. z.angularBindGlobal(String name, Object object) // unbind angular scope variable 'name' in current notebook. z.angularUnbind(String name) // unbind angular scope variable 'name' in all notebooks related to current interpreter. z.angularUnbindGlobal(String name)
Using the above example, let's bind world
variable to name
. Then you can see AngularJs view is immediately updated.
Through ZeppelinContext, you can watch / unwatch variables in AngularJs view. Currently, it only works in Spark Interpreter ( scala ).
// register for angular scope variable 'name' (notebook) z.angularWatch(String name, (before, after) => { ... }) // unregister watcher for angular variable 'name' (notebook) z.angularUnwatch(String name) // register for angular scope variable 'name' (global) z.angularWatchGlobal(String name, (before, after) => { ... }) // unregister watcher for angular variable 'name' (global) z.angularUnwatchGlobal(String name)
Let's make a button. When it is clicked, the value of run
will be increased 1 by 1.
z.angularBind("run", 0)
will initialize run
to zero. And then, it will be also applied to run
in z.angularWatch()
. When the button is clicked, you'll see both run
and numWatched
are incremented by 1.
In this section, we will introduce a simpler and more intuitive way of using Angular Display System in Zeppelin.
Here are some usages.
// In notebook scope import org.apache.zeppelin.display.angular.notebookscope._ import AngularElem._ // In paragraph scope import org.apache.zeppelin.display.angular.paragraphscope._ import AngularElem._
// automatically convert to string and print with %angular display system directive in front. <div></div>.display
// on click <div></div>.onClick(() => { my callback routine }).display // on change <div></div>.onChange(() => { my callback routine }).display // arbitrary event <div></div>.onEvent("ng-click", () => { my callback routine }).display
// bind model <div></div>.model("myModel").display // bind model with initial value <div></div>.model("myModel", initialValue).display
// read model AngularModel("myModel")() // update model AngularModel("myModel", "newValue")
<div style="color:blue"> <h4>Hello Angular Display System</h4> </div>.display
<div class="btn btn-success"> Click me </div>.onClick{() => // callback for button click }.display
{% raw %}
<div>{{{{myModel}}}}</div>.model("myModel", "Initial Value").display
{% endraw %}
// read the value AngularModel("myModel")() // update the value AngularModel("myModel", "New value")
Using below example, you can convert the lowercase string to uppercase.
{% raw %}
// clear previously created angular object. AngularElem.disassociate val button = <div class="btn btn-success btn-sm">Convert</div>.onClick{() => val inputString = AngularModel("input")().toString AngularModel("title", inputString.toUpperCase) } <div> { <h4> {{{{title}}}}</h4>.model("title", "Please type text to convert uppercase") } Your text { <input type="text"></input>.model("input", "") } {button} </div>.display
{% endraw %}