mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
Apply auto TOC to all of docs under docs/displaysystem/
This commit is contained in:
AhyoungRyu
parent
b05365f7a7
commit
f35db4730f
3 changed files with 30 additions and 28 deletions
|
|
@ -19,15 +19,17 @@ limitations under the License.
|
|||
-->
|
||||
{% include JB/setup %}
|
||||
|
||||
# Back-end Angular API in Apache Zeppelin
|
||||
|
||||
## Back-end Angular API in Zeppelin
|
||||
<div id="toc"></div>
|
||||
|
||||
## Overview
|
||||
|
||||
Angular display system treats output as a view template for [AngularJS](https://angularjs.org/).
|
||||
It compiles templates and displays them inside of Zeppelin.
|
||||
|
||||
Zeppelin provides a gateway between your interpreter and your compiled **AngularJS view** templates.
|
||||
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.
|
||||
|
||||
## Basic Usage
|
||||
### Print AngularJS view
|
||||
|
||||
To use angular display system, you should start with `%angular`.
|
||||
|
|
@ -94,30 +96,25 @@ When the button is clicked, you'll see both `run` and `numWatched` are increment
|
|||
## Let's make it Simpler and more Intuitive
|
||||
In this section, we will introduce a simpler and more intuitive way of using **Angular Display System** in Zeppelin.
|
||||
|
||||
### How can we use it?
|
||||
Here are some usages.
|
||||
|
||||
#### Import
|
||||
|
||||
##### - In notebook scope
|
||||
### Import
|
||||
```scala
|
||||
// In notebook scope
|
||||
import org.apache.zeppelin.display.angular.notebookscope._
|
||||
import AngularElem._
|
||||
```
|
||||
|
||||
##### - In paragraph scope
|
||||
```scala
|
||||
// In paragraph scope
|
||||
import org.apache.zeppelin.display.angular.paragraphscope._
|
||||
import AngularElem._
|
||||
```
|
||||
|
||||
|
||||
#### Display Element
|
||||
### Display Element
|
||||
```scala
|
||||
// automatically convert to string and print with %angular display system directive in front.
|
||||
<div><div>.display
|
||||
```
|
||||
#### Event Handler
|
||||
### Event Handler
|
||||
```scala
|
||||
// on click
|
||||
<div></div>.onClick(() => {
|
||||
|
|
@ -135,7 +132,7 @@ import AngularElem._
|
|||
}).display
|
||||
```
|
||||
|
||||
#### Bind Model
|
||||
### Bind Model
|
||||
```scala
|
||||
// bind model
|
||||
<div></div>.model("myModel").display
|
||||
|
|
@ -144,7 +141,7 @@ import AngularElem._
|
|||
<div></div>.model("myModel", initialValue).display
|
||||
```
|
||||
|
||||
#### Interact with Model
|
||||
### Interact with Model
|
||||
```scala
|
||||
// read model
|
||||
AngularModel("myModel")()
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ limitations under the License.
|
|||
-->
|
||||
{% include JB/setup %}
|
||||
|
||||
# Basic Display System in Apache Zeppelin
|
||||
|
||||
<div id="toc"></div>
|
||||
|
||||
## Text
|
||||
|
||||
By default, Apache Zeppelin prints interpreter responce as a plain text using `text` display system.
|
||||
|
|
|
|||
|
|
@ -19,18 +19,18 @@ limitations under the License.
|
|||
-->
|
||||
{% include JB/setup %}
|
||||
|
||||
# Front-end Angular API in Apache Zeppelin
|
||||
|
||||
## Front-end Angular API in Zeppelin
|
||||
<div id="toc"></div>
|
||||
|
||||
In addition to the back-end API to handle Angular objects binding, Zeppelin also exposes a simple AngularJS **`z`** object on the front-end side to expose the same capabilities.
|
||||
## Basic Usage
|
||||
In addition to the [back-end API](./back-end-angular.html) to handle Angular objects binding, Apache Zeppelin also exposes a simple AngularJS <code>**z**</code> object on the front-end side to expose the same capabilities.
|
||||
This <code>**z**</code> object is accessible in the Angular isolated scope for each paragraph.
|
||||
|
||||
This **`z`** object is accessible in the Angular isolated scope for each paragraph.
|
||||
|
||||
<br />
|
||||
### Bind / Unbind Variables
|
||||
|
||||
Through the **`z`**, you can bind / unbind variables to **AngularJS view**
|
||||
|
||||
Through the **`z`**, you can bind / unbind variables to **AngularJS view**.
|
||||
Bind a value to an angular object and a **mandatory** target paragraph:
|
||||
|
||||
```html
|
||||
|
|
@ -68,9 +68,10 @@ Unbind/remove a value from angular object and a **mandatory** target paragraph:
|
|||
The signature for the **`z.angularBind() / z.angularUnbind()`** functions are:
|
||||
|
||||
```javascript
|
||||
|
||||
// Bind
|
||||
z.angularBind(angularObjectName, angularObjectValue, paragraphId);
|
||||
|
||||
// Unbind
|
||||
z.angularUnbind(angularObjectName, angularObjectValue, paragraphId);
|
||||
|
||||
```
|
||||
|
|
@ -100,24 +101,24 @@ You can also trigger paragraph execution by calling **`z.runParagraph()`** funct
|
|||
<img src="../assets/themes/zeppelin/img/screenshots/z_runParagraph.gif" />
|
||||
|
||||
<br />
|
||||
### Overriding dynamic form with Angular Object
|
||||
## Overriding dynamic form with Angular Object
|
||||
|
||||
The front-end Angular Interaction API has been designed to offer richer form capabilities and variable binding. With the existing **Dynamic Form** system you can already create input text, select and checkbox forms but the choice is rather limited and the look & feel cannot be changed.
|
||||
|
||||
The idea is to create a custom form using plain HTML/AngularJS code and bind actions on this form to push/remove Angular variables to targeted paragraphs using this new API.
|
||||
|
||||
Consequently if you use the **Dynamic Form** syntax in a paragraph and there is a bound Angular object having the same name as the _${formName}_, the Angular object will have higher priority and the **Dynamic Form** will not be displayed. Example:
|
||||
Consequently if you use the **Dynamic Form** syntax in a paragraph and there is a bound Angular object having the same name as the `${formName}`, the Angular object will have higher priority and the **Dynamic Form** will not be displayed. Example:
|
||||
|
||||
|
||||
<img src="../assets/themes/zeppelin/img/screenshots/z_angularJs_overriding_dynamic_form.gif" />
|
||||
|
||||
|
||||
<br />
|
||||
### Feature matrix comparison
|
||||
## Feature matrix comparison
|
||||
|
||||
How does the front-end AngularJS API compares to the back-end API ? Below is a comparison matrix for both APIs:
|
||||
How does the front-end AngularJS API compares to the [back-end API](./back-end-angular.html) ? Below is a comparison matrix for both APIs:
|
||||
|
||||
<table>
|
||||
<table class="table-configuration">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Actions</th>
|
||||
|
|
|
|||
Loading…
Reference in a new issue