mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
e4ff4c0353
https://issues.apache.org/jira/browse/ZEPPELIN-448 Addresses update documentation for Spark configuration. And BASE_PATH change after #430, #431 is deployed. (currently deployed website has this change applied) Author: Lee moon soo <moon@apache.org> Closes #448 from Leemoonsoo/update_install and squashes the following commits:54e2edf[Lee moon soo] add newlinecbd95d6[Lee moon soo] Add description for included version of spark when SPARK_HOME is not set00099ad[Lee moon soo] Add description for bumping up versioncf99212[Lee moon soo] Fix typoab6d267[Lee moon soo] Update BASE_PATH73a737c[Lee moon soo] Remove instruction for 0.5.0 as zeppelin has documentation per version4369f3e[Lee moon soo] Fix linkdcdaa74[Lee moon soo] Add more configurations possible8c9361d[Lee moon soo] Change font stylede74e6b[Lee moon soo] Update install and configuring spark
98 lines
3.2 KiB
Markdown
98 lines
3.2 KiB
Markdown
---
|
|
layout: page
|
|
title: "Angular Display System"
|
|
description: ""
|
|
group: display
|
|
---
|
|
<!--
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
{% include JB/setup %}
|
|
|
|
|
|
### Angular (Beta)
|
|
|
|
Angular display system treats output as an view template of [AngularJS](https://angularjs.org/).
|
|
It compiles templates and display inside of Zeppelin.
|
|
|
|
Zeppelin provides gateway between your interpreter and your compiled AngularJS view teamplates.
|
|
Therefore, you can not only update scope variable from your interpreter but also watch your scope variable in the interpreter, which is JVM process.
|
|
|
|
<br />
|
|
#### Print AngularJS view
|
|
|
|
To use angular display system, your output should starts with "%angular".
|
|
<img src="/assets/themes/zeppelin/img/screenshots/display_angular.png" width=600px />
|
|
|
|
Note that display system is backend independent.
|
|
|
|
Because of variable 'name' is not defined, 'Hello \{\{name\}\}' display 'Hello '.
|
|
|
|
<br />
|
|
#### Bind/Unbind variable
|
|
|
|
Through ZeppelinContext, you can bind/unbind variable 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)
|
|
|
|
```
|
|
|
|
In the example, let's bind "world" variable 'name'. Then you can see AngularJs view are updated immediately.
|
|
|
|
<img src="/assets/themes/zeppelin/img/screenshots/display_angular1.png" width=600px />
|
|
|
|
|
|
<br />
|
|
#### Watch/Unwatch variable
|
|
|
|
Through ZeppelinContext, you can watch/unwatch variable 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 an button, that increment 'run' variable by 1 when it is clicked.
|
|
z.angularBind("run", 0) will initialize 'run' to zero. And then register watcher of 'run'.
|
|
|
|
<img src="/assets/themes/zeppelin/img/screenshots/display_angular2.png" width=600px />
|
|
|
|
After clicked button, you'll see both 'run' and numWatched are increased by 1
|
|
|
|
<img src="/assets/themes/zeppelin/img/screenshots/display_angular3.png" width=600px />
|