Skip to content

Commit f35db47

Browse files
AhyoungRyuAhyoungRyu
committed
Apply auto TOC to all of docs under docs/displaysystem/
1 parent b05365f commit f35db47

File tree

3 files changed

+30
-28
lines changed

3 files changed

+30
-28
lines changed

‎docs/displaysystem/back-end-angular.md‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,17 @@ limitations under the License.
1919
-->
2020
{% include JB/setup %}
2121

22+
# Back-end Angular API in Apache Zeppelin
2223

23-
## Back-end Angular API in Zeppelin
24+
<div id="toc"></div>
2425

25-
Angular display system treats output as a view template for [AngularJS](https://angularjs.org/).
26-
It compiles templates and displays them inside of Zeppelin.
26+
## Overview
2727

28-
Zeppelin provides a gateway between your interpreter and your compiled **AngularJS view** templates.
28+
Angular display system treats output as a view template for [AngularJS](https://angularjs.org/).
29+
It compiles templates and displays them inside of Apache Zeppelin. Zeppelin provides a gateway between your interpreter and your compiled **AngularJS view** templates.
2930
Therefore, you can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.
3031

32+
## Basic Usage
3133
### Print AngularJS view
3234

3335
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
9496
## Let's make it Simpler and more Intuitive
9597
In this section, we will introduce a simpler and more intuitive way of using **Angular Display System** in Zeppelin.
9698

97-
### How can we use it?
9899
Here are some usages.
99100

100-
#### Import
101-
102-
##### - In notebook scope
101+
### Import
103102
```scala
103+
// In notebook scope
104104
import org.apache.zeppelin.display.angular.notebookscope._
105105
import AngularElem._
106-
```
107106

108-
##### - In paragraph scope
109-
```scala
107+
// In paragraph scope
110108
import org.apache.zeppelin.display.angular.paragraphscope._
111109
import AngularElem._
112110
```
113111

114-
115-
#### Display Element
112+
### Display Element
116113
```scala
117114
// automatically convert to string and print with %angular display system directive in front.
118115
<div><div>.display
119116
```
120-
#### Event Handler
117+
### Event Handler
121118
```scala
122119
// on click
123120
<div></div>.onClick(() => {
@@ -135,7 +132,7 @@ import AngularElem._
135132
}).display
136133
```
137134

138-
#### Bind Model
135+
### Bind Model
139136
```scala
140137
// bind model
141138
<div></div>.model("myModel").display
@@ -144,7 +141,7 @@ import AngularElem._
144141
<div></div>.model("myModel", initialValue).display
145142
```
146143

147-
#### Interact with Model
144+
### Interact with Model
148145
```scala
149146
// read model
150147
AngularModel("myModel")()

‎docs/displaysystem/basicdisplaysystem.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ limitations under the License.
1919
-->
2020
{% include JB/setup %}
2121

22+
# Basic Display System in Apache Zeppelin
23+
24+
<div id="toc"></div>
25+
2226
## Text
2327

2428
By default, Apache Zeppelin prints interpreter responce as a plain text using `text` display system.

‎docs/displaysystem/front-end-angular.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,18 @@ limitations under the License.
1919
-->
2020
{% include JB/setup %}
2121

22+
# Front-end Angular API in Apache Zeppelin
2223

23-
## Front-end Angular API in Zeppelin
24+
<div id="toc"></div>
2425

25-
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.
26+
## Basic Usage
27+
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.
28+
This <code>**z**</code> object is accessible in the Angular isolated scope for each paragraph.
2629

27-
This **`z`** object is accessible in the Angular isolated scope for each paragraph.
2830

29-
<br />
3031
### Bind / Unbind Variables
3132

32-
Through the **`z`**, you can bind / unbind variables to **AngularJS view**
33-
33+
Through the **`z`**, you can bind / unbind variables to **AngularJS view**.
3434
Bind a value to an angular object and a **mandatory** target paragraph:
3535

3636
```html
@@ -68,9 +68,10 @@ Unbind/remove a value from angular object and a **mandatory** target paragraph:
6868
The signature for the **`z.angularBind() / z.angularUnbind()`** functions are:
6969

7070
```javascript
71-
71+
// Bind
7272
z.angularBind(angularObjectName, angularObjectValue, paragraphId);
7373

74+
// Unbind
7475
z.angularUnbind(angularObjectName, angularObjectValue, paragraphId);
7576

7677
```
@@ -100,24 +101,24 @@ You can also trigger paragraph execution by calling **`z.runParagraph()`** funct
100101
<img src="../assets/themes/zeppelin/img/screenshots/z_runParagraph.gif" />
101102

102103
<br />
103-
### Overriding dynamic form with Angular Object
104+
## Overriding dynamic form with Angular Object
104105

105106
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.
106107

107108
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.
108109

109-
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:
110+
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:
110111

111112

112113
<img src="../assets/themes/zeppelin/img/screenshots/z_angularJs_overriding_dynamic_form.gif" />
113114

114115

115116
<br />
116-
### Feature matrix comparison
117+
## Feature matrix comparison
117118

118-
How does the front-end AngularJS API compares to the back-end API ? Below is a comparison matrix for both APIs:
119+
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:
119120

120-
<table>
121+
<table class="table-configuration">
121122
<thead>
122123
<tr>
123124
<th>Actions</th>

0 commit comments

Comments
 (0)