Added: zeppelin/site/docs/0.8.2/sitemap.txt
URL:
http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.2/sitemap.txt?rev=1867691&view=auto
==============================================================================
--- zeppelin/site/docs/0.8.2/sitemap.txt (added)
+++ zeppelin/site/docs/0.8.2/sitemap.txt Sun Sep 29 07:08:10 2019
@@ -0,0 +1,94 @@
+
+http://zeppelin.apache.org/interpreter/alluxio
+http://zeppelin.apache.org/usage/display_system/angular_backend
+http://zeppelin.apache.org/usage/display_system/angular_frontend
+http://zeppelin.apache.org/atom.xml
+http://zeppelin.apache.org/setup/security/authentication_nginx
+http://zeppelin.apache.org/usage/display_system/basic
+http://zeppelin.apache.org/interpreter/beam
+http://zeppelin.apache.org/interpreter/bigquery
+http://zeppelin.apache.org/interpreter/cassandra
+http://zeppelin.apache.org/setup/deployment/cdh
+http://zeppelin.apache.org/setup/operation/configuration
+http://zeppelin.apache.org/usage/rest_api/configuration
+http://zeppelin.apache.org/usage/rest_api/credential
+http://zeppelin.apache.org/usage/other_features/cron_scheduler
+http://zeppelin.apache.org/usage/other_features/customizing_homepage
+http://zeppelin.apache.org/setup/security/datasource_authorization
+http://zeppelin.apache.org/usage/interpreter/dependency_management
+http://zeppelin.apache.org/setup/deployment/docker
+http://zeppelin.apache.org/usage/interpreter/dynamic_loading
+http://zeppelin.apache.org/interpreter/elasticsearch
+http://zeppelin.apache.org/usage/interpreter/execution_hooks
+http://zeppelin.apache.org/quickstart/explore_ui
+http://zeppelin.apache.org/interpreter/flink
+http://zeppelin.apache.org/setup/deployment/flink_and_spark_cluster
+http://zeppelin.apache.org/interpreter/geode
+http://zeppelin.apache.org/interpreter/groovy
+http://zeppelin.apache.org/interpreter/hbase
+http://zeppelin.apache.org/interpreter/hdfs
+http://zeppelin.apache.org/usage/rest_api/helium
+http://zeppelin.apache.org/interpreter/hive
+http://zeppelin.apache.org/setup/basics/how_to_build
+http://zeppelin.apache.org/development/contribution/how_to_contribute_code
+http://zeppelin.apache.org/development/contribution/how_to_contribute_website
+http://zeppelin.apache.org/setup/security/http_security_headers
+http://zeppelin.apache.org/interpreter/ignite
+http://zeppelin.apache.org/
+http://zeppelin.apache.org/quickstart/install
+http://zeppelin.apache.org/usage/interpreter/installation
+http://zeppelin.apache.org/usage/rest_api/interpreter
+http://zeppelin.apache.org/usage/interpreter/interpreter_binding_mode
+http://zeppelin.apache.org/usage/dynamic_form/intro
+http://zeppelin.apache.org/interpreter/jdbc
+http://zeppelin.apache.org/interpreter/kylin
+http://zeppelin.apache.org/interpreter/lens
+http://zeppelin.apache.org/interpreter/mahout
+http://zeppelin.apache.org/interpreter/markdown
+http://zeppelin.apache.org/setup/basics/multi_user_support
+http://zeppelin.apache.org/interpreter/neo4j
+http://zeppelin.apache.org/usage/rest_api/notebook
+http://zeppelin.apache.org/usage/other_features/notebook_actions
+http://zeppelin.apache.org/setup/security/notebook_authorization
+http://zeppelin.apache.org/usage/rest_api/notebook_repository
+http://zeppelin.apache.org/development/helium/overview
+http://zeppelin.apache.org/usage/interpreter/overview
+http://zeppelin.apache.org/usage/other_features/personalized_mode
+http://zeppelin.apache.org/pleasecontribute
+http://zeppelin.apache.org/interpreter/postgresql
+http://zeppelin.apache.org/setup/operation/proxy_setting
+http://zeppelin.apache.org/usage/other_features/publishing_paragraphs
+http://zeppelin.apache.org/interpreter/python
+http://zeppelin.apache.org/quickstart/python_with_zeppelin
+http://zeppelin.apache.org/interpreter/r
+http://zeppelin.apache.org/rss.xml
+http://zeppelin.apache.org/interpreter/sap
+http://zeppelin.apache.org/interpreter/scalding
+http://zeppelin.apache.org/interpreter/scio
+http://zeppelin.apache.org/screenshots
+http://zeppelin.apache.org/assets/themes/zeppelin/js/search.js
+http://zeppelin.apache.org/search
+http://zeppelin.apache.org/search_data.json
+http://zeppelin.apache.org/interpreter/shell
+http://zeppelin.apache.org/setup/security/shiro_authentication
+http://zeppelin.apache.org/sitemap.txt
+http://zeppelin.apache.org/interpreter/spark
+http://zeppelin.apache.org/setup/deployment/spark_cluster_mode
+http://zeppelin.apache.org/quickstart/spark_with_zeppelin
+http://zeppelin.apache.org/quickstart/sql_with_zeppelin
+http://zeppelin.apache.org/setup/storage/storage
+http://zeppelin.apache.org/setup/operation/trouble_shooting
+http://zeppelin.apache.org/quickstart/tutorial
+http://zeppelin.apache.org/setup/operation/upgrading
+http://zeppelin.apache.org/development/contribution/useful_developer_tools
+http://zeppelin.apache.org/usage/interpreter/user_impersonation
+http://zeppelin.apache.org/setup/deployment/virtual_machine
+http://zeppelin.apache.org/development/helium/writing_application
+http://zeppelin.apache.org/development/helium/writing_spell
+http://zeppelin.apache.org/development/helium/writing_visualization_basic
+http://zeppelin.apache.org/development/helium/writing_visualization_transformation
+http://zeppelin.apache.org/development/writing_zeppelin_interpreter
+http://zeppelin.apache.org/setup/deployment/yarn_install
+http://zeppelin.apache.org/usage/other_features/zeppelin_context
+http://zeppelin.apache.org/usage/rest_api/zeppelin_server
+
Propchange: zeppelin/site/docs/0.8.2/sitemap.txt
------------------------------------------------------------------------------
svn:executable = *
Added: zeppelin/site/docs/0.8.2/usage/display_system/angular_backend.html
URL:
http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.2/usage/display_system/angular_backend.html?rev=1867691&view=auto
==============================================================================
--- zeppelin/site/docs/0.8.2/usage/display_system/angular_backend.html (added)
+++ zeppelin/site/docs/0.8.2/usage/display_system/angular_backend.html Sun Sep
29 07:08:10 2019
@@ -0,0 +1,456 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.8.0 Documentation: Backend Angular API in Apache
Zeppelin</title>
+ <meta name="description" content="Apache Zeppelin provides a gateway
between your interpreter and your compiled AngularJS view templates. You can
not only update scope variables from your interpreter but also watch them in
the interpreter, which is JVM process.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
+ <![endif]-->
+
+ <link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.8.0/assets/themes//bootstrap/css/bootstrap.css"
rel="stylesheet">
+ <link href="/docs/0.8.0/assets/themes//css/style.css?body=1"
rel="stylesheet" type="text/css">
+ <link href="/docs/0.8.0/assets/themes//css/syntax.css" rel="stylesheet"
type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72"
href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114"
href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script>
+ <script
src="/docs/0.8.0/assets/themes//bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/docs.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/anchor.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/toc.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/lunr.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.8.0/atom.xml" type="application/atom+xml"
rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.8.0/rss.xml" type="application/rss+xml"
rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top"
role="navigation">
+ <div class="container navbar-container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org";>
+ <img
src="/docs/0.8.0/assets/themes/zeppelin/img/zeppelin_logo.png" width="50"
+ style="margin-top: -2px;" alt="I'm zeppelin">
+ <span style="margin-left: 5px; font-size: 27px;">Zeppelin</span>
+ <a class="navbar-brand-version" href="/docs/0.8.0"
+ style="font-size: 15px; color: white;"> 0.8.0
+ </a>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick
Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span>Getting Started</span></li>
+ <li><a
href="/docs/0.8.0/quickstart/install.html">Install</a></li>
+ <li><a href="/docs/0.8.0/quickstart/explore_ui.html">Explore
UI</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a
href="/docs/0.8.0/quickstart/spark_with_zeppelin.html">Spark with
Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/python_with_zeppelin.html">Python with
Zeppelin</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Usage<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Dynamic Form</span></li>
+ <li><a href="/docs/0.8.0/usage/dynamic_form/intro.html">What
is Dynamic Form?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Display System</span></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#text">Text Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#html">HTML Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#table">Table Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#network">Network
Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/angular_backend.html">Angular Display
using Backend API</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/angular_frontend.html">Angular Display
using Frontend API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Interpreter</span></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/overview.html">Overview</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/interpreter_binding_mode.html">Interpreter
Binding Mode</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/user_impersonation.html">User
Impersonation</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/dependency_management.html">Dependency
Management</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/installation.html">Installing
Interpreters</a></li>
+ <!--<li><a
href="/docs/0.8.0/usage/interpreter/dynamic_loading.html">Dynamic Interpreter
Loading (Experimental)</a></li>-->
+ <li><a
href="/docs/0.8.0/usage/interpreter/execution_hooks.html">Execution Hooks
(Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Other Features</span></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/publishing_paragraphs.html">Publishing
Paragraphs</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/personalized_mode.html">Personalized
Mode</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/customizing_homepage.html">Customizing
Zeppelin Homepage</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/notebook_actions.html">Notebook
Actions</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/cron_scheduler.html">Cron
Scheduler</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/zeppelin_context.html">Zeppelin
Context</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>REST API</span></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/interpreter.html">Interpreter API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/zeppelin_server.html">Zeppelin Server
API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/notebook.html">Notebook API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/notebook_repository.html">Notebook Repository
API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/configuration.html">Configuration API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/credential.html">Credential API</a></li>
+ <li><a href="/docs/0.8.0/usage/rest_api/helium.html">Helium
API</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Setup<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Basics</span></li>
+ <li><a href="/docs/0.8.0/setup/basics/how_to_build.html">How
to Build Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/setup/basics/multi_user_support.html">Multi-user
Support</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Deployment</span></li>
+ <!--<li><a
href="/docs/0.8.0/setup/deployment/docker.html">Docker Image for
Zeppelin</a></li>-->
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark
Cluster Mode: Standalone</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark
Cluster Mode: YARN</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark
Cluster Mode: Mesos</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/flink_and_spark_cluster.html">Zeppelin with
Flink, Spark Cluster</a></li>
+ <li><a href="/docs/0.8.0/setup/deployment/cdh.html">Zeppelin
on CDH</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/virtual_machine.html">Zeppelin on VM:
Vagrant</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Security</span></li>
+ <li><a
href="/docs/0.8.0/setup/security/authentication_nginx.html">HTTP Basic Auth
using NGINX</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/shiro_authentication.html">Shiro
Authentication</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/notebook_authorization.html">Notebook
Authorization</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/datasource_authorization.html">Data Source
Authorization</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/http_security_headers.html">HTTP Security
Headers</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Notebook Storage</span></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-s3">S3
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-azure">Azure
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-mongodb">MongoDB
Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Operation</span></li>
+ <li><a
href="/docs/0.8.0/setup/operation/configuration.html">Configuration</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/proxy_setting.html">Proxy Setting</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/upgrading.html">Upgrading</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/trouble_shooting.html">Trouble
Shooting</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Interpreters</span></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/overview.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.8.0/interpreter/spark.html">Spark</a></li>
+ <li><a href="/docs/0.8.0/interpreter/jdbc.html">JDBC</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/python.html">Python</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a
href="/docs/0.8.0/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.8.0/interpreter/beam.html">Beam</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.8.0/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.8.0/interpreter/geode.html">Geode</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/groovy.html">Groovy</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hive.html">Hive</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.8.0/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.8.0/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.8.0/interpreter/livy.html">Livy</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.8.0/interpreter/neo4j.html">Neo4j</a></li>
+ <li><a href="/docs/0.8.0/interpreter/pig.html">Pig</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.8.0/interpreter/r.html">R</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.8.0/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.8.0/interpreter/shell.html">Shell</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left:
auto;">
+ <li class="title"><span>Extending Zeppelin</span></li>
+ <li><a
href="/docs/0.8.0/development/writing_zeppelin_interpreter.html">Writing
Zeppelin Interpreter</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Helium (Experimental)</span></li>
+ <li><a
href="/docs/0.8.0/development/helium/overview.html">Overview</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_application.html">Writing Helium
Application</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_spell.html">Writing Helium
Spell</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_visualization_basic.html">Writing
Helium Visualization: Basics</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_visualization_transformation.html">Writing
Helium Visualization: Transformation</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Contributing to Zeppelin</span></li>
+ <li><a href="/docs/0.8.0/setup/basics/how_to_build.html">How
to Build Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/useful_developer_tools.html">Useful
Developer Tools</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/how_to_contribute_code.html">How to
Contribute (code)</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/how_to_contribute_website.html">How
to Contribute (website)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>External Resources</span></li>
+ <li><a target="_blank" href="">Mailing List</a></li>
+ <li><a target="_blank" href="">Apache Zeppelin Wiki</a></li>
+ <li><a target="_blank" href="">Stackoverflow Questions about
Zeppelin</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.8.0/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Backend Angular API in Apache Zeppelin">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+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.
+-->
+
+<h1>Backend Angular API in Apache Zeppelin</h1>
+
+<div id="toc"></div>
+
+<h2>Overview</h2>
+
+<p>Angular display system treats output as a view template for <a
href="https://angularjs.org/";>AngularJS</a>.
+It compiles templates and displays them inside of Apache Zeppelin. Zeppelin
provides a gateway between your interpreter and your compiled <strong>AngularJS
view</strong> templates.
+Therefore, you can not only update scope variables from your interpreter but
also watch them in the interpreter, which is JVM process.</p>
+
+<h2>Basic Usage</h2>
+
+<h3>Print AngularJS view</h3>
+
+<p>To use angular display system, you should start with <code>%angular</code>.
+<img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/display_angular.png"
width="60%" /></p>
+
+<p>Since <code>name</code> is not defined, <code>Hello</code> will display
<code>Hello</code>.</p>
+
+<blockquote>
+<p><strong>Please Note:</strong> Display system is backend independent.</p>
+</blockquote>
+
+<p><br /></p>
+
+<h3>Bind / Unbind Variables</h3>
+
+<p>Through <strong>ZeppelinContext</strong>, you can bind / unbind variables
to <strong>AngularJS view</strong>. Currently, it only works in <strong>Spark
Interpreter ( scala )</strong>.</p>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// bind my 'object' as
angular scope variable 'name' in current notebook.</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularBind</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">,</span>
<span class="nc">Object</span> <span class="n">object</span><span
class="o">)</span>
+
+<span class="c1">// bind my 'object' as angular scope variable
'name' in all notebooks related to current interpreter.</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularBindGlobal</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">,</span>
<span class="nc">Object</span> <span class="n">object</span><span
class="o">)</span>
+
+<span class="c1">// unbind angular scope variable 'name' in current
notebook.</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularUnbind</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+
+<span class="c1">// unbind angular scope variable 'name' in all
notebooks related to current interpreter.</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularUnbindGlobal</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+</code></pre></div>
+<p>Using the above example, let's bind <code>world</code> variable to
<code>name</code>. Then you can see <strong>AngularJs view</strong> is
immediately updated.</p>
+
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/display_angular1.png"
width="60%" /></p>
+
+<p><br /></p>
+
+<h3>Watch / Unwatch Variables</h3>
+
+<p>Through <strong>ZeppelinContext</strong>, you can watch / unwatch variables
in <strong>AngularJs view</strong>. Currently, it only works in <strong>Spark
Interpreter ( scala )</strong>.</p>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// register for angular scope
variable 'name' (notebook)</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularWatch</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">,</span>
<span class="o">(</span><span class="n">before</span><span class="o">,</span>
<span class="n">after</span><span class="o">)</span> <span
class="k">=></span> <span class="o">{</span> <span class="o">...</span>
<span class="o">})</span>
+
+<span class="c1">// unregister watcher for angular variable 'name'
(notebook)</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularUnwatch</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+
+<span class="c1">// register for angular scope variable 'name'
(global)</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularWatchGlobal</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">,</span>
<span class="o">(</span><span class="n">before</span><span class="o">,</span>
<span class="n">after</span><span class="o">)</span> <span
class="k">=></span> <span class="o">{</span> <span class="o">...</span>
<span class="o">})</span>
+
+<span class="c1">// unregister watcher for angular variable 'name'
(global)</span>
+<span class="n">z</span><span class="o">.</span><span
class="n">angularUnwatchGlobal</span><span class="o">(</span><span
class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+</code></pre></div>
+<p>Let's make a button. When it is clicked, the value of <code>run</code>
will be increased 1 by 1.</p>
+
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/display_angular2.png"
width="60%" /></p>
+
+<p><code>z.angularBind("run", 0)</code> will initialize
<code>run</code> to zero. And then, it will be also applied to <code>run</code>
in <code>z.angularWatch()</code>.
+When the button is clicked, you'll see both <code>run</code> and
<code>numWatched</code> are incremented by 1.</p>
+
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/display_angular3.png"
width="60%" /></p>
+
+<h2>Let's make it Simpler and more Intuitive</h2>
+
+<p>In this section, we will introduce a simpler and more intuitive way of
using <strong>Angular Display System</strong> in Zeppelin.</p>
+
+<p>Here are some usages.</p>
+
+<h3>Import</h3>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// In notebook scope</span>
+<span class="k">import</span> <span
class="nn">org.apache.zeppelin.display.angular.notebookscope._</span>
+<span class="k">import</span> <span class="nn">AngularElem._</span>
+
+<span class="c1">// In paragraph scope</span>
+<span class="k">import</span> <span
class="nn">org.apache.zeppelin.display.angular.paragraphscope._</span>
+<span class="k">import</span> <span class="nn">AngularElem._</span>
+</code></pre></div>
+<h3>Display Element</h3>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// automatically convert to
string and print with %angular display system directive in front.</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<h3>Event Handler</h3>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// on click</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">onClick</span><span class="o">(()</span>
<span class="k">=></span> <span class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span
class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+
+<span class="c1">// on change</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">onChange</span><span class="o">(()</span>
<span class="k">=></span> <span class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span
class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+
+<span class="c1">// arbitrary event</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">onEvent</span><span
class="o">(</span><span class="s">"ng-click"</span><span
class="o">,</span> <span class="o">()</span> <span class="k">=></span> <span
class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span
class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+</code></pre></div>
+<h3>Bind Model</h3>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// bind model</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">model</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">).</span><span
class="n">display</span>
+
+<span class="c1">// bind model with initial value</span>
+<span class="o"><</span><span class="n">div</span><span
class="o">></</span><span class="n">div</span><span
class="o">>.</span><span class="n">model</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">,</span> <span
class="n">initialValue</span><span class="o">).</span><span
class="n">display</span>
+</code></pre></div>
+<h3>Interact with Model</h3>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// read model</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">)()</span>
+
+<span class="c1">// update model</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">,</span> <span
class="s">"newValue"</span><span class="o">)</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Example: Basic Usage</h3>
+
+<p>Using the above basic usages, you can apply them like below examples.</p>
+
+<h4>Display Elements</h4>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="o"><</span><span
class="n">div</span> <span class="n">style</span><span class="o">=</span><span
class="s">"color:blue"</span><span class="o">></span>
+ <span class="o"><</span><span class="n">h4</span><span
class="o">></span><span class="nc">Hello</span> <span
class="nc">Angular</span> <span class="nc">Display</span> <span
class="nc">System</span><span class="o"></</span><span
class="n">h4</span><span class="o">></span>
+<span class="o"></</span><span class="n">div</span><span
class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<h4>OnClick Event</h4>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="o"><</span><span
class="n">div</span> <span class="n">class</span><span class="o">=</span><span
class="s">"btn btn-success"</span><span class="o">></span>
+ <span class="nc">Click</span> <span class="n">me</span>
+<span class="o"></</span><span class="n">div</span><span
class="o">>.</span><span class="n">onClick</span><span class="o">{()</span>
<span class="k">=></span>
+ <span class="c1">// callback for button click</span>
+<span class="o">}.</span><span class="n">display</span>
+</code></pre></div>
+<h4>Bind Model</h4>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span> <span class="o"><</span><span
class="n">div</span><span class="o">>{{{{</span><span
class="n">myModel</span><span class="o">}}}}</</span><span
class="n">div</span><span class="o">>.</span><span
class="n">model</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">,</span> <span
class="s">"Initial Value"</span><span class="o">).</span><span
class="n">display</span>
+</code></pre></div>
+<h4>Interact With Model</h4>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// read the value</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">)()</span>
+
+<span class="c1">// update the value</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span
class="s">"myModel"</span><span class="o">,</span> <span
class="s">"New value"</span><span class="o">)</span>
+</code></pre></div>
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/docs-img/basic-usage-angular.png"
width="70%"></p>
+
+<h3>Example: String Converter</h3>
+
+<p>Using below example, you can convert the lowercase string to uppercase.</p>
+<div class="highlight"><pre><code class="language-scala"
data-lang="scala"><span></span><span class="c1">// clear previously created
angular object.</span>
+<span class="nc">AngularElem</span><span class="o">.</span><span
class="n">disassociate</span>
+
+<span class="k">val</span> <span class="n">button</span> <span
class="k">=</span> <span class="o"><</span><span class="n">div</span> <span
class="n">class</span><span class="o">=</span><span class="s">"btn
btn-success btn-sm"</span><span class="o">></span><span
class="nc">Convert</span><span class="o"></</span><span
class="n">div</span><span class="o">>.</span><span
class="n">onClick</span><span class="o">{()</span> <span class="k">=></span>
+ <span class="k">val</span> <span class="n">inputString</span> <span
class="k">=</span> <span class="nc">AngularModel</span><span
class="o">(</span><span class="s">"input"</span><span
class="o">)().</span><span class="n">toString</span>
+ <span class="nc">AngularModel</span><span class="o">(</span><span
class="s">"title"</span><span class="o">,</span> <span
class="n">inputString</span><span class="o">.</span><span
class="n">toUpperCase</span><span class="o">)</span>
+<span class="o">}</span>
+
+<span class="o"><</span><span class="n">div</span><span
class="o">></span>
+ <span class="o">{</span> <span class="o"><</span><span
class="n">h4</span><span class="o">></span> <span class="o">{{{{</span><span
class="n">title</span><span class="o">}}}}</</span><span
class="n">h4</span><span class="o">>.</span><span
class="n">model</span><span class="o">(</span><span
class="s">"title"</span><span class="o">,</span> <span
class="s">"Please type text to convert uppercase"</span><span
class="o">)</span> <span class="o">}</span>
+ <span class="nc">Your</span> <span class="n">text</span> <span
class="o">{</span> <span class="o"><</span><span class="n">input</span>
<span class="n">type</span><span class="o">=</span><span
class="s">"text"</span><span class="o">></</span><span
class="n">input</span><span class="o">>.</span><span
class="n">model</span><span class="o">(</span><span
class="s">"input"</span><span class="o">,</span> <span
class="s">""</span><span class="o">)</span> <span class="o">}</span>
+ <span class="o">{</span><span class="n">button</span><span class="o">}</span>
+<span class="o"></</span><span class="n">div</span><span
class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/docs-img/string-converter-angular.gif"
width="70%"></p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2019 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Propchange: zeppelin/site/docs/0.8.2/usage/display_system/angular_backend.html
------------------------------------------------------------------------------
svn:executable = *
Added: zeppelin/site/docs/0.8.2/usage/display_system/angular_frontend.html
URL:
http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.2/usage/display_system/angular_frontend.html?rev=1867691&view=auto
==============================================================================
--- zeppelin/site/docs/0.8.2/usage/display_system/angular_frontend.html (added)
+++ zeppelin/site/docs/0.8.2/usage/display_system/angular_frontend.html Sun Sep
29 07:08:10 2019
@@ -0,0 +1,419 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.8.0 Documentation: Frontend Angular API in Apache
Zeppelin</title>
+ <meta name="description" content="In addition to the back-end API to
handle Angular objects binding, Apache Zeppelin exposes a simple AngularJS z
object on the front-end side to expose the same capabilities.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
+ <![endif]-->
+
+ <link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.8.0/assets/themes//bootstrap/css/bootstrap.css"
rel="stylesheet">
+ <link href="/docs/0.8.0/assets/themes//css/style.css?body=1"
rel="stylesheet" type="text/css">
+ <link href="/docs/0.8.0/assets/themes//css/syntax.css" rel="stylesheet"
type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72"
href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114"
href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script>
+ <script
src="/docs/0.8.0/assets/themes//bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/docs.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/anchor.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/toc.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/lunr.min.js"></script>
+ <script src="/docs/0.8.0/assets/themes//js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.8.0/atom.xml" type="application/atom+xml"
rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.8.0/rss.xml" type="application/rss+xml"
rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top"
role="navigation">
+ <div class="container navbar-container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org";>
+ <img
src="/docs/0.8.0/assets/themes/zeppelin/img/zeppelin_logo.png" width="50"
+ style="margin-top: -2px;" alt="I'm zeppelin">
+ <span style="margin-left: 5px; font-size: 27px;">Zeppelin</span>
+ <a class="navbar-brand-version" href="/docs/0.8.0"
+ style="font-size: 15px; color: white;"> 0.8.0
+ </a>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick
Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span>Getting Started</span></li>
+ <li><a
href="/docs/0.8.0/quickstart/install.html">Install</a></li>
+ <li><a href="/docs/0.8.0/quickstart/explore_ui.html">Explore
UI</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a
href="/docs/0.8.0/quickstart/spark_with_zeppelin.html">Spark with
Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/quickstart/python_with_zeppelin.html">Python with
Zeppelin</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Usage<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Dynamic Form</span></li>
+ <li><a href="/docs/0.8.0/usage/dynamic_form/intro.html">What
is Dynamic Form?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Display System</span></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#text">Text Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#html">HTML Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#table">Table Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/basic.html#network">Network
Display</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/angular_backend.html">Angular Display
using Backend API</a></li>
+ <li><a
href="/docs/0.8.0/usage/display_system/angular_frontend.html">Angular Display
using Frontend API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Interpreter</span></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/overview.html">Overview</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/interpreter_binding_mode.html">Interpreter
Binding Mode</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/user_impersonation.html">User
Impersonation</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/dependency_management.html">Dependency
Management</a></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/installation.html">Installing
Interpreters</a></li>
+ <!--<li><a
href="/docs/0.8.0/usage/interpreter/dynamic_loading.html">Dynamic Interpreter
Loading (Experimental)</a></li>-->
+ <li><a
href="/docs/0.8.0/usage/interpreter/execution_hooks.html">Execution Hooks
(Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Other Features</span></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/publishing_paragraphs.html">Publishing
Paragraphs</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/personalized_mode.html">Personalized
Mode</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/customizing_homepage.html">Customizing
Zeppelin Homepage</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/notebook_actions.html">Notebook
Actions</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/cron_scheduler.html">Cron
Scheduler</a></li>
+ <li><a
href="/docs/0.8.0/usage/other_features/zeppelin_context.html">Zeppelin
Context</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>REST API</span></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/interpreter.html">Interpreter API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/zeppelin_server.html">Zeppelin Server
API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/notebook.html">Notebook API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/notebook_repository.html">Notebook Repository
API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/configuration.html">Configuration API</a></li>
+ <li><a
href="/docs/0.8.0/usage/rest_api/credential.html">Credential API</a></li>
+ <li><a href="/docs/0.8.0/usage/rest_api/helium.html">Helium
API</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Setup<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Basics</span></li>
+ <li><a href="/docs/0.8.0/setup/basics/how_to_build.html">How
to Build Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/setup/basics/multi_user_support.html">Multi-user
Support</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Deployment</span></li>
+ <!--<li><a
href="/docs/0.8.0/setup/deployment/docker.html">Docker Image for
Zeppelin</a></li>-->
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark
Cluster Mode: Standalone</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark
Cluster Mode: YARN</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark
Cluster Mode: Mesos</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/flink_and_spark_cluster.html">Zeppelin with
Flink, Spark Cluster</a></li>
+ <li><a href="/docs/0.8.0/setup/deployment/cdh.html">Zeppelin
on CDH</a></li>
+ <li><a
href="/docs/0.8.0/setup/deployment/virtual_machine.html">Zeppelin on VM:
Vagrant</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Security</span></li>
+ <li><a
href="/docs/0.8.0/setup/security/authentication_nginx.html">HTTP Basic Auth
using NGINX</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/shiro_authentication.html">Shiro
Authentication</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/notebook_authorization.html">Notebook
Authorization</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/datasource_authorization.html">Data Source
Authorization</a></li>
+ <li><a
href="/docs/0.8.0/setup/security/http_security_headers.html">HTTP Security
Headers</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Notebook Storage</span></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-s3">S3
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-azure">Azure
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub
Storage</a></li>
+ <li><a
href="/docs/0.8.0/setup/storage/storage.html#notebook-storage-in-mongodb">MongoDB
Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Operation</span></li>
+ <li><a
href="/docs/0.8.0/setup/operation/configuration.html">Configuration</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/proxy_setting.html">Proxy Setting</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/upgrading.html">Upgrading</a></li>
+ <li><a
href="/docs/0.8.0/setup/operation/trouble_shooting.html">Trouble
Shooting</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Interpreters</span></li>
+ <li><a
href="/docs/0.8.0/usage/interpreter/overview.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.8.0/interpreter/spark.html">Spark</a></li>
+ <li><a href="/docs/0.8.0/interpreter/jdbc.html">JDBC</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/python.html">Python</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a
href="/docs/0.8.0/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.8.0/interpreter/beam.html">Beam</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.8.0/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.8.0/interpreter/geode.html">Geode</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/groovy.html">Groovy</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.8.0/interpreter/hive.html">Hive</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.8.0/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.8.0/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.8.0/interpreter/livy.html">Livy</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.8.0/interpreter/neo4j.html">Neo4j</a></li>
+ <li><a href="/docs/0.8.0/interpreter/pig.html">Pig</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.8.0/interpreter/r.html">R</a></li>
+ <li><a
href="/docs/0.8.0/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.8.0/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.8.0/interpreter/shell.html">Shell</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left:
auto;">
+ <li class="title"><span>Extending Zeppelin</span></li>
+ <li><a
href="/docs/0.8.0/development/writing_zeppelin_interpreter.html">Writing
Zeppelin Interpreter</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Helium (Experimental)</span></li>
+ <li><a
href="/docs/0.8.0/development/helium/overview.html">Overview</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_application.html">Writing Helium
Application</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_spell.html">Writing Helium
Spell</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_visualization_basic.html">Writing
Helium Visualization: Basics</a></li>
+ <li><a
href="/docs/0.8.0/development/helium/writing_visualization_transformation.html">Writing
Helium Visualization: Transformation</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Contributing to Zeppelin</span></li>
+ <li><a href="/docs/0.8.0/setup/basics/how_to_build.html">How
to Build Zeppelin</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/useful_developer_tools.html">Useful
Developer Tools</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/how_to_contribute_code.html">How to
Contribute (code)</a></li>
+ <li><a
href="/docs/0.8.0/development/contribution/how_to_contribute_website.html">How
to Contribute (website)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>External Resources</span></li>
+ <li><a target="_blank" href="">Mailing List</a></li>
+ <li><a target="_blank" href="">Apache Zeppelin Wiki</a></li>
+ <li><a target="_blank" href="">Stackoverflow Questions about
Zeppelin</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.8.0/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Frontend Angular API in Apache Zeppelin">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+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.
+-->
+
+<h1>Frontend Angular API in Apache Zeppelin</h1>
+
+<div id="toc"></div>
+
+<h2>Basic Usage</h2>
+
+<p>In addition to the <a href="./angular_backend.html">backend Angular API</a>
to handle Angular objects binding, Apache Zeppelin also exposes a simple
AngularJS <code><strong>z</strong></code> object on the front-end side to
expose the same capabilities.
+This <code><strong>z</strong></code> object is accessible in the Angular
isolated scope for each paragraph.</p>
+
+<h3>Bind / Unbind Variables</h3>
+
+<p>Through the <strong><code>z</code></strong>, you can bind / unbind
variables to <strong>AngularJS view</strong>.
+Bind a value to an angular object and a <strong>mandatory</strong> target
paragraph:</p>
+<div class="highlight"><pre><code class="language-html"
data-lang="html"><span></span>%angular
+
+<span class="p"><</span><span class="nt">form</span> <span
class="na">class</span><span class="o">=</span><span
class="s">"form-inline"</span><span class="p">></span>
+ <span class="p"><</span><span class="nt">div</span> <span
class="na">class</span><span class="o">=</span><span
class="s">"form-group"</span><span class="p">></span>
+ <span class="p"><</span><span class="nt">label</span> <span
class="na">for</span><span class="o">=</span><span
class="s">"superheroId"</span><span class="p">></span>Super Hero:
<span class="p"></</span><span class="nt">label</span><span
class="p">></span>
+ <span class="p"><</span><span class="nt">input</span> <span
class="na">type</span><span class="o">=</span><span
class="s">"text"</span> <span class="na">class</span><span
class="o">=</span><span class="s">"form-control"</span> <span
class="na">id</span><span class="o">=</span><span
class="s">"superheroId"</span> <span
class="na">placeholder</span><span class="o">=</span><span
class="s">"Superhero name ..."</span> <span
class="na">ng-model</span><span class="o">=</span><span
class="s">"superhero"</span><span class="p">></</span><span
class="nt">input</span><span class="p">></span>
+ <span class="p"></</span><span class="nt">div</span><span
class="p">></span>
+ <span class="p"><</span><span class="nt">button</span> <span
class="na">type</span><span class="o">=</span><span
class="s">"submit"</span> <span class="na">class</span><span
class="o">=</span><span class="s">"btn btn-primary"</span> <span
class="na">ng-click</span><span class="o">=</span><span
class="s">"z.angularBind('superhero',superhero,'20160222-232336_1472609686')"</span><span
class="p">></span> Bind<span class="p"></</span><span
class="nt">button</span><span class="p">></span>
+<span class="p"></</span><span class="nt">form</span><span
class="p">></span>
+</code></pre></div>
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/z_angularBind.gif"
/></p>
+
+<hr/>
+
+<p>Unbind/remove a value from angular object and a <strong>mandatory</strong>
target paragraph:</p>
+<div class="highlight"><pre><code class="language-html"
data-lang="html"><span></span>%angular
+
+<span class="p"><</span><span class="nt">form</span> <span
class="na">class</span><span class="o">=</span><span
class="s">"form-inline"</span><span class="p">></span>
+ <span class="p"><</span><span class="nt">button</span> <span
class="na">type</span><span class="o">=</span><span
class="s">"submit"</span> <span class="na">class</span><span
class="o">=</span><span class="s">"btn btn-primary"</span> <span
class="na">ng-click</span><span class="o">=</span><span
class="s">"z.angularUnbind('superhero','20160222-232336_1472609686')"</span><span
class="p">></span> UnBind<span class="p"></</span><span
class="nt">button</span><span class="p">></span>
+<span class="p"></</span><span class="nt">form</span><span
class="p">></span>
+</code></pre></div>
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/z_angularUnbind.gif"
/></p>
+
+<p>The signature for the <strong><code>z.angularBind() /
z.angularUnbind()</code></strong> functions are:</p>
+<div class="highlight"><pre><code class="language-javascript"
data-lang="javascript"><span></span><span class="c1">// Bind</span>
+<span class="nx">z</span><span class="p">.</span><span
class="nx">angularBind</span><span class="p">(</span><span
class="nx">angularObjectName</span><span class="p">,</span> <span
class="nx">angularObjectValue</span><span class="p">,</span> <span
class="nx">paragraphId</span><span class="p">);</span>
+
+<span class="c1">// Unbind</span>
+<span class="nx">z</span><span class="p">.</span><span
class="nx">angularUnbind</span><span class="p">(</span><span
class="nx">angularObjectName</span><span class="p">,</span> <span
class="nx">angularObjectValue</span><span class="p">,</span> <span
class="nx">paragraphId</span><span class="p">);</span>
+</code></pre></div>
+<p>All the parameters are mandatory.</p>
+
+<p><br /></p>
+
+<h3>Run Paragraph</h3>
+
+<p>You can also trigger paragraph execution by calling
<strong><code>z.runParagraph()</code></strong> function passing the appropriate
paragraphId: </p>
+<div class="highlight"><pre><code class="language-html"
data-lang="html"><span></span>%angular
+
+<span class="p"><</span><span class="nt">form</span> <span
class="na">class</span><span class="o">=</span><span
class="s">"form-inline"</span><span class="p">></span>
+ <span class="p"><</span><span class="nt">div</span> <span
class="na">class</span><span class="o">=</span><span
class="s">"form-group"</span><span class="p">></span>
+ <span class="p"><</span><span class="nt">label</span> <span
class="na">for</span><span class="o">=</span><span
class="s">"paragraphId"</span><span class="p">></span>Paragraph
Id: <span class="p"></</span><span class="nt">label</span><span
class="p">></span>
+ <span class="p"><</span><span class="nt">input</span> <span
class="na">type</span><span class="o">=</span><span
class="s">"text"</span> <span class="na">class</span><span
class="o">=</span><span class="s">"form-control"</span> <span
class="na">id</span><span class="o">=</span><span
class="s">"paragraphId"</span> <span
class="na">placeholder</span><span class="o">=</span><span
class="s">"Paragraph Id ..."</span> <span
class="na">ng-model</span><span class="o">=</span><span
class="s">"paragraph"</span><span class="p">></</span><span
class="nt">input</span><span class="p">></span>
+ <span class="p"></</span><span class="nt">div</span><span
class="p">></span>
+ <span class="p"><</span><span class="nt">button</span> <span
class="na">type</span><span class="o">=</span><span
class="s">"submit"</span> <span class="na">class</span><span
class="o">=</span><span class="s">"btn btn-primary"</span> <span
class="na">ng-click</span><span class="o">=</span><span
class="s">"z.runParagraph(paragraph)"</span><span
class="p">></span> Run Paragraph<span class="p"></</span><span
class="nt">button</span><span class="p">></span>
+<span class="p"></</span><span class="nt">form</span><span
class="p">></span>
+</code></pre></div>
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/z_runParagraph.gif"
/></p>
+
+<p><br /></p>
+
+<h2>Overriding dynamic form with Angular Object</h2>
+
+<p>The front-end Angular Interaction API has been designed to offer richer
form capabilities and variable binding. With the existing <strong>Dynamic
Form</strong> system you can already create input text, select and checkbox
forms but the choice is rather limited and the look & feel cannot be
changed.</p>
+
+<p>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. </p>
+
+<p>Consequently if you use the <strong>Dynamic Form</strong> syntax in a
paragraph and there is a bound Angular object having the same name as the
<code>${formName}</code>, the Angular object will have higher priority and the
<strong>Dynamic Form</strong> will not be displayed. Example: </p>
+
+<p><img
src="/docs/0.8.0/assets/themes/zeppelin/img/screenshots/z_angularJs_overriding_dynamic_form.gif"
/></p>
+
+<p><br /></p>
+
+<h2>Feature matrix comparison</h2>
+
+<p>How does the front-end AngularJS API compares to the <a
href="./angular_backend.html">backend Angular API</a>? Below is a comparison
matrix for both APIs:</p>
+
+<table class="table-configuration">
+ <thead>
+ <tr>
+ <th>Actions</th>
+ <th>Front-end API</th>
+ <th>Back-end API</th>
+ </tr>
+ </thead>
+ <tr>
+ <td>Initiate binding</td>
+ <td>z.angularbind(var, initialValue, paragraphId)</td>
+ <td>z.angularBind(var, initialValue)</td>
+ </tr>
+ <tr>
+ <td>Update value</td>
+ <td>same to ordinary angularjs scope variable, or
z.angularbind(var, newValue, paragraphId)</td>
+ <td>z.angularBind(var, newValue)</td>
+ </tr>
+ <tr>
+ <td>Watching value</td>
+ <td>same to ordinary angularjs scope variable</td>
+ <td>z.angularWatch(var, (oldVal, newVal) => ...)</td>
+ </tr>
+ <tr>
+ <td>Destroy binding</td>
+ <td>z.angularUnbind(var, paragraphId)</td>
+ <td>z.angularUnbind(var)</td>
+ </tr>
+ <tr>
+ <td>Executing Paragraph</td>
+ <td>z.runParagraph(paragraphId)</td>
+ <td>z.run(paragraphId)</td>
+ </tr>
+ <tr>
+ <td>Executing Paragraph (Specific paragraphs in other notes) (</td>
+ <td></td>
+ <td>z.run(noteid, paragraphId)</td>
+ </tr>
+ <tr>
+ <td>Executing note</td>
+ <td></td>
+ <td>z.runNote(noteId)</td>
+ </tr>
+ <tbody>
+ <tbody>
+</table>
+
+<p>Both APIs are pretty similar, except for value watching where it is done
naturally by AngularJS internals on the front-end and by user custom watcher
functions in the back-end.</p>
+
+<p>There is also a slight difference in term of scope. Front-end API limits
the Angular object binding to a paragraph scope whereas back-end API allows you
to bind an Angular object at the global or note scope. This restriction has
been designed purposely to avoid Angular object leaks and scope pollution.</p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2019 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Propchange: zeppelin/site/docs/0.8.2/usage/display_system/angular_frontend.html
------------------------------------------------------------------------------
svn:executable = *
