Repository: incubator-zeppelin Updated Branches: refs/heads/master 602a1e78c -> e87f5b1ab
(Documentation): Utilities for Angular Display System ### What is this PR for? This PR is related #591 created by Leemoonsoo. I just added a section explaining the **Utilities for Angular Display System** to `docs/angular.md`. ### What type of PR is it? Documentation ### Todos * [x] - Add a section for explaining Utilities for Angular Display System to angular.md ### Is there a relevant Jira issue? No. But there is a related PR: #591 (and maybe #588) ### How should this be tested? Just apply this PR and checkout the `Display System -> Angular` tab in Zeppelin web site. ### Screenshots (if appropriate) ### Questions: * Does the licenses files need update? No. * Is there breaking changes for older versions? No. * Does this needs documentation? No. Author: Ryu Ah young <[email protected]> Closes #650 from AhyoungRyu/display_utils_docs and squashes the following commits: 6923400 [Ryu Ah young] (Documentation): Add package import information 280b846 [Ryu Ah young] (Documentation): Fix some grammar errors in angular.md 13330d0 [Ryu Ah young] (Documentation): Fix some sentences a7cf9ac [Ryu Ah young] (Documentation): Utilities for Angular Display System Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/e87f5b1a Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/e87f5b1a Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/e87f5b1a Branch: refs/heads/master Commit: e87f5b1ab00bedc118421ae2c3f501d9987c854a Parents: 602a1e7 Author: Ryu Ah young <[email protected]> Authored: Sun Jan 24 20:42:59 2016 +0900 Committer: Lee moon soo <[email protected]> Committed: Mon Feb 1 11:02:07 2016 +0900 ---------------------------------------------------------------------- .../img/docs-img/basic-usage-angular.png | Bin 0 -> 96787 bytes .../img/docs-img/string-converter-angular.gif | Bin 0 -> 136430 bytes docs/displaysystem/angular.md | 179 ++++++++++++++++--- 3 files changed, 150 insertions(+), 29 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/e87f5b1a/docs/assets/themes/zeppelin/img/docs-img/basic-usage-angular.png ---------------------------------------------------------------------- diff --git a/docs/assets/themes/zeppelin/img/docs-img/basic-usage-angular.png b/docs/assets/themes/zeppelin/img/docs-img/basic-usage-angular.png new file mode 100644 index 0000000..80e0dc6 Binary files /dev/null and b/docs/assets/themes/zeppelin/img/docs-img/basic-usage-angular.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/e87f5b1a/docs/assets/themes/zeppelin/img/docs-img/string-converter-angular.gif ---------------------------------------------------------------------- diff --git a/docs/assets/themes/zeppelin/img/docs-img/string-converter-angular.gif b/docs/assets/themes/zeppelin/img/docs-img/string-converter-angular.gif new file mode 100644 index 0000000..ae648d0 Binary files /dev/null and b/docs/assets/themes/zeppelin/img/docs-img/string-converter-angular.gif differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/e87f5b1a/docs/displaysystem/angular.md ---------------------------------------------------------------------- diff --git a/docs/displaysystem/angular.md b/docs/displaysystem/angular.md index c8a0ddc..5693e86 100644 --- a/docs/displaysystem/angular.md +++ b/docs/displaysystem/angular.md @@ -20,32 +20,28 @@ limitations under the License. {% include JB/setup %} -### Angular (Beta) +## Angular Display System in Zeppelin -Angular display system treats output as an view template of [AngularJS](https://angularjs.org/). -It compiles templates and display inside of Zeppelin. +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 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. +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. -<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 /> +### Print AngularJS view -Note that display system is backend independent. +To use angular display system, you should start with `%angular`. +<img src="/assets/themes/zeppelin/img/screenshots/display_angular.png" width="60%" /> -Because of variable 'name' is not defined, 'Hello \{\{name\}\}' display 'Hello '. +Since `name` is not defined, `Hello {{name}}` will display `Hello`. +> **Please Note:** Display system is backend independent. <br /> -#### Bind/Unbind variable - -Through ZeppelinContext, you can bind/unbind variable to AngularJS view. +### Bind / Unbind Variables -Currently it only works in Spark Interpreter (scala). +Through **ZeppelinContext**, you can bind / unbind variables to **AngularJS view**. Currently, it only works in **Spark Interpreter ( scala )**. -``` +```scala // bind my 'object' as angular scope variable 'name' in current notebook. z.angularBind(String name, Object object) @@ -60,19 +56,17 @@ z.angularUnbindGlobal(String name) ``` -In the example, let's bind "world" variable 'name'. Then you can see AngularJs view are updated immediately. +Using the above example, let's bind `world` variable to `name`. Then you can see **AngularJs view** is immediately updated. -<img src="/assets/themes/zeppelin/img/screenshots/display_angular1.png" width=600px /> +<img src="/assets/themes/zeppelin/img/screenshots/display_angular1.png" width="60%" /> <br /> -#### Watch/Unwatch variable - -Through ZeppelinContext, you can watch/unwatch variable in AngularJs view. +### Watch / Unwatch Variables -Currently it only works in Spark Interpreter (scala). +Through **ZeppelinContext**, you can watch / unwatch variables in **AngularJs view**. Currently, it only works in **Spark Interpreter ( scala )**. -``` +```scala // register for angular scope variable 'name' (notebook) z.angularWatch(String name, (before, after) => { ... }) @@ -88,11 +82,138 @@ 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'. +Let's make a button. When it is clicked, the value of `run` will be increased 1 by 1. + +<img src="/assets/themes/zeppelin/img/screenshots/display_angular2.png" width="60%" /> + +`z.angularBind("run", 0)` will initialize `run` to zero. And then, it will be also applied to `run` in `z.angularWatch()`. +When the button is clicked, you'll see both `run` and `numWatched` are incremented by 1. + +<img src="/assets/themes/zeppelin/img/screenshots/display_angular3.png" width="60%" /> + +## 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 +```scala +import org.apache.zeppelin.display.angular.notebookscope._ +import AngularElem._ +``` + +##### - In paragraph scope +```scala +import org.apache.zeppelin.display.angular.paragraphscope._ +import AngularElem._ +``` + + +#### Display Element +```scala +// automatically convert to string and print with %angular display system directive in front. +<div><div>.display +``` +#### Event Handler +```scala +// on click +<div></div>.onClick(() => { + my callback routine +}).display + +// on change +<div></div>.onChange(() => { + my callback routine +}).display + +// arbitrary event +<div></div>.onEvent("ng-click", () => { + my callback routine +}).display +``` -<img src="/assets/themes/zeppelin/img/screenshots/display_angular2.png" width=600px /> +#### Bind Model +```scala +// bind model +<div></div>.model("myModel").display + +// bind model with initial value +<div></div>.model("myModel", initialValue).display +``` + +#### Interact with Model +```scala +// read model +AngularModel("myModel")() + +// update model +AngularModel("myModel", "newValue") +``` + +<br/> +### Example: Basic Usage +Using the above basic usages, you can apply them like below examples. + +#### Display Elements + +```scala +<div style="color:blue"> + <h4>Hello Angular Display System</h4> +</div>.display +``` + +#### OnClick Event +```scala +<div class="btn btn-success"> + Click me +</div>.onClick{() => + // callback for button click +}.display +``` + +#### Bind Model + +{% raw %} +```scala + <div>{{{{myModel}}}}</div>.model("myModel", "Initial Value").display +``` +{% endraw %} + +#### Interact With Model +```scala +// read the value +AngularModel("myModel")() + +// update the value +AngularModel("myModel", "New value") +``` + +<img src="../assets/themes/zeppelin/img/docs-img/basic-usage-angular.png" width="70%"> + +### Example: String Converter +Using below example, you can convert the lowercase string to uppercase. + +{% raw %} +```scala +// clear previously created angular object. +AngularElem.disassociate + +val button = <div class="btn btn-success btn-sm">Convert</div>.onClick{() => + val inputString = AngularModel("input")().toString + AngularModel("title", inputString.toUpperCase) +} + +<div> + { <h4> {{{{title}}}}</h4>.model("title", "Please type text to convert uppercase") } + Your text { <input type="text"></input>.model("input", "") } + {button} +</div>.display +``` +{% endraw %} -After clicked button, you'll see both 'run' and numWatched are increased by 1 +<img src="../assets/themes/zeppelin/img/docs-img/string-converter-angular.gif" width="70%"> -<img src="/assets/themes/zeppelin/img/screenshots/display_angular3.png" width=600px /> + \ No newline at end of file
