原文链接 : http://zeppelin.apache.org/docs/0.7.2/displaysystem/back-end-angular.html

译文链接 : http://cwiki.apachecn.org/pages/viewpage.action?pageId=10030654

贡献者 : 片刻 ApacheCN Apache中文网

概观

角度显示系统将输出视为AngularJS的视图模板。它编译模板并将其显示在Apache Zeppelin中。Zeppelin在您的解释器和您编译的AngularJS视图模板之间提供了一个网关。因此，您不仅可以从解释器更新范围变量，还可以在解释器中进行更新，这是JVM进程。

基本用法

打印AngularJS视图

要使用角度显示系统，您应该从头开始%angular。

后端Angular API - 图1

由于name未定义，Hello将显示Hello。

请注意：显示系统与后端无关。

绑定/解除绑定变量

通过ZeppelinContext，您可以将变量绑定/解除绑定到AngularJS视图。目前，它只适用于Spark Interpreter（scala）。


1. // bind my 'object' as angular scope variable 'name' in current notebook.
2. z.angularBind(String name, Object object)

4. // bind my 'object' as angular scope variable 'name' in all notebooks related to current interpreter.
5. z.angularBindGlobal(String name, Object object)

7. // unbind angular scope variable 'name' in current notebook.
8. z.angularUnbind(String name)

10. // unbind angular scope variable 'name' in all notebooks related to current interpreter.
11. z.angularUnbindGlobal(String name)

使用上面的例子，我们来绑定world变量name。然后您可以看到AngularJs视图立即更新。

后端Angular API - 图2

观察/不记事变数

通过ZeppelinContext，您可以在AngularJs视图中观看/解除变量。目前，它只适用于Spark Interpreter（scala）。


1. // register for angular scope variable 'name' (notebook)
2. z.angularWatch(String name, (before, after) => { ... })

4. // unregister watcher for angular variable 'name' (notebook)
5. z.angularUnwatch(String name)

7. // register for angular scope variable 'name' (global)
8. z.angularWatchGlobal(String name, (before, after) => { ... })

10. // unregister watcher for angular variable 'name' (global)
11. z.angularUnwatchGlobal(String name)



1. 让我们做一个按钮。点击时，值run将被增加1乘以1。

后端Angular API - 图3

z.angularBind("run", 0)将初始化run为零。然后，它也将适用run于z.angularWatch()。单击按钮时，您将看到两者run并numWatched递增1。

后端Angular API - 图4

让我们让它更简单和更直观

在本节中，我们将介绍一种在Zeppelin 中使用角度显示系统的更简单和直观的方法。

这里有一些用法。

Import


1. // In notebook scope
2. import org.apache.zeppelin.display.angular.notebookscope._
3. import AngularElem._

5. // In paragraph scope
6. import org.apache.zeppelin.display.angular.paragraphscope._
7. import AngularElem._

显示元素


1. // automatically convert to string and print with %angular display system directive in front.
2. <div><div>.display

事件处理程序


1. // on click
2. <div></div>.onClick(() => {
3. my callback routine
4. }).display

6. // on change
7. <div></div>.onChange(() => {
8. my callback routine
9. }).display

11. // arbitrary event
12. <div></div>.onEvent("ng-click", () => {
13. my callback routine
14. }).display

绑定模型


1. // bind model
2. <div></div>.model("myModel").display

4. // bind model with initial value
5. <div></div>.model("myModel", initialValue).display

与模型交互


1. // read model
2. AngularModel("myModel")()

4. // update model
5. AngularModel("myModel", "newValue")

示例：基本使用

使用上述基本用法，您可以像下面的示例一样应用它们。

显示元素


1. <div style="color:blue">
2. <h4>Hello Angular Display System</h4>
3. </div>.display

OnClick事件


1. <div class="btn btn-success">
2. Click me
3. </div>.onClick{() =>
4. // callback for button click
5. }.display

绑定模型


1. <div>{{{{myModel}}}}</div>.model("myModel", "Initial Value").display

与模型交互


1. // read the value
2. AngularModel("myModel")()

4. // update the value
5. AngularModel("myModel", "New value")



1. ![后端Angular API - 图5](https://static.bookstack.cn/projects/Zeppelin/d01f015842938fe34a225a9c60a054d3.png;charset=utf-8)

示例：字符串转换器

使用下面的示例，您可以将小写字符串转换为大写。


1. // clear previously created angular object.
2. AngularElem.disassociate

4. val button = <div class="btn btn-success btn-sm">Convert</div>.onClick{() =>
5. val inputString = AngularModel("input")().toString
6. AngularModel("title", inputString.toUpperCase)
7. }

9. <div>
10. { <h4> {{{{title}}}}</h4>.model("title", "Please type text to convert uppercase") }
11. Your text { <input type="text"></input>.model("input", "") }
12. {button}
13. </div>.display

后端Angular API - 图6