Apache Zeppelin中的Angular后端API详解-优快云博客

Apache Zeppelin中的Angular后端API详解

zeppelin Web-based notebook that enables data-driven, interactive data analytics and collaborative documents with SQL, Scala and more. 项目地址: https://gitcode.com/gh_mirrors/zeppelin1/zeppelin

概述

Apache Zeppelin提供了一个强大的Angular显示系统，它允许用户在笔记中创建动态交互式内容。这个系统将输出视为AngularJS视图模板，编译后显示在Zeppelin界面中。最独特的是，它建立了一个连接解释器(JVM进程)和AngularJS视图模板的桥梁，实现了双向数据绑定和监控。

核心功能解析

1. 基本使用

要使用Angular显示系统，只需在段落开头使用%angular指令：

%angular
Hello {{name}}

初始状态下，由于name未定义，会显示"Hello"。这展示了AngularJS的基本插值语法。

2. 变量绑定机制

Zeppelin提供了多种绑定方式，通过ZeppelinContext实现：

局部绑定（当前笔记）

// 将对象绑定到当前笔记的Angular作用域
z.angularBind("变量名", 对象值)

全局绑定（所有相关笔记）

// 将对象绑定到解释器全局作用域
z.angularBindGlobal("变量名", 对象值)

解除绑定

// 解除当前笔记的绑定
z.angularUnbind("变量名")

// 解除全局绑定
z.angularUnbindGlobal("变量名")

3. 变量监控机制

Zeppelin允许监控Angular变量的变化：

// 监控变量变化（当前笔记）
z.angularWatch("变量名", (旧值, 新值) => {
  // 变化处理逻辑
})

// 全局监控
z.angularWatchGlobal("变量名", (旧值, 新值) => {
  // 变化处理逻辑
})

// 取消监控
z.angularUnwatch("变量名")
z.angularUnwatchGlobal("变量名")

简化API使用指南

为了简化开发，Zeppelin提供了一套更直观的DSL：

1. 基础导入

// 笔记作用域
import org.apache.zeppelin.display.angular.notebookscope._
import AngularElem._

// 段落作用域
import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._

2. 元素显示

<div>内容</div>.display

3. 事件处理

// 点击事件
<div class="btn">按钮</div>.onClick(() => {
  // 点击处理逻辑
}).display

// 变化事件
<input type="text"/>.onChange(() => {
  // 文本变化处理
}).display

4. 模型绑定与交互

// 绑定模型
<div>{{模型名}}</div>.model("模型名", 初始值).display

// 读取模型值
AngularModel("模型名")()

// 更新模型值
AngularModel("模型名", "新值")

实战案例

案例1：简单计数器

// 初始化计数器
z.angularBind("count", 0)

// 创建增加按钮
<div class="btn">
  点击增加 (当前: {{count}})
</div>.onClick(() => {
  val current = AngularModel("count")().toString.toInt
  AngularModel("count", current + 1)
}).display

案例2：文本转换器

// 清除已有绑定
AngularElem.disassociate

// 创建转换按钮
val button = <div class="btn">转换</div>.onClick{() =>
  val input = AngularModel("input")().toString
  AngularModel("output", input.toUpperCase)
}

// 创建界面
<div>
  输入文本: <input type="text"/>.model("input", "")
  {button}
  <br/>
  转换结果: <b>{{output}}</b>.model("output", "")
</div>.display