Apache Zeppelin中的前端Angular API

基本用法

除了后端Angular API用于处理Angular对象绑定外，Apache Zeppelin还在前端暴露了一个简单的AngularJS z对象，以提供相同的功能。这个z对象在每个段落的Angular隔离作用域中都可以访问。

绑定/解绑变量

通过z，你可以将变量绑定/解绑到AngularJS视图。将一个值绑定到一个angular对象和一个强制目标段落：

%angular

<form class="form-inline">
  <div class="form-group">
    <label for="superheroId">Super Hero: </label>
    <input type="text" class="form-control" id="superheroId" placeholder="Superhero name ..." ng-model="superhero"></input>
  </div>
  <button type="submit" class="btn btn-primary" ng-click="z.angularBind('superhero',superhero,'20160222-232336_1472609686')"> Bind</button>
</form>

从angular对象中解绑/移除一个值，并且有一个强制性的目标段落：

%angular

<form class="form-inline">
  <button type="submit" class="btn btn-primary" ng-click="z.angularUnbind('superhero','20160222-232336_1472609686')"> UnBind</button>
</form>

z.angularBind() / z.angularUnbind() 函数的签名为：

// Bind
z.angularBind(angularObjectName, angularObjectValue, paragraphId);

// Unbind
z.angularUnbind(angularObjectName, angularObjectValue, paragraphId);

所有参数都是必填的。

运行段落

你也可以通过调用z.runParagraph()函数并传递适当的paragraphId来触发段落执行：

%angular

<form class="form-inline">
  <div class="form-group">
    <label for="paragraphId">Paragraph Id: </label>
    <input type="text" class="form-control" id="paragraphId" placeholder="Paragraph Id ..." ng-model="paragraph"></input>
  </div>
  <button type="submit" class="btn btn-primary" ng-click="z.runParagraph(paragraph)"> Run Paragraph</button>
</form>

使用Angular对象覆盖动态表单

前端Angular交互API旨在提供更丰富的表单功能和变量绑定。使用现有的动态表单系统，您已经可以创建输入文本、选择和复选框表单，但选择相当有限，外观和感觉无法更改。

想法是使用普通的HTML/AngularJS代码创建一个自定义表单，并在此表单上绑定操作，以使用这个新的API将Angular变量推送到目标段落或从中移除。

因此，如果您在段落中使用动态表单语法，并且有一个与${formName}同名的绑定Angular对象，Angular对象将具有更高的优先级，动态表单将不会显示。示例：

特征矩阵比较

前端AngularJS API与后端Angular API相比如何？以下是两个API的比较矩阵：

操作	前端 API	后端 API
初始化绑定	z.angularbind(var, initialValue, paragraphId)	z.angularBind(var, initialValue)
更新值	与普通的angularjs作用域变量相同，或使用z.angularbind(var, newValue, paragraphId)	z.angularBind(var, newValue)
观察值	与普通的angularjs作用域变量相同	z.angularWatch(var, (oldVal, newVal) => ...)
销毁绑定	z.angularUnbind(var, paragraphId)	z.angularUnbind(var)
执行段落	z.runParagraph(paragraphId)	z.run(paragraphId)
执行段落（其他笔记中的特定段落）		z.run(noteid, paragraphId)
执行笔记		z.runNote(noteId)

除了值监视在前端由AngularJS内部自然完成，在后端由用户自定义监视函数完成外，这两个API非常相似。

在作用域方面也存在一些细微的差异。前端API将Angular对象绑定限制在段落作用域内，而后端API允许您在全局或笔记作用域内绑定Angular对象。这种限制是特意设计的，以避免Angular对象泄漏和作用域污染。