You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by zj...@apache.org on 2019/09/29 07:08:15 UTC
svn commit: r1867691 [32/41] - in /zeppelin/site: docs/0.8.2/
docs/0.8.2/assets/ docs/0.8.2/assets/themes/
docs/0.8.2/assets/themes/zeppelin/
docs/0.8.2/assets/themes/zeppelin/bootstrap/
docs/0.8.2/assets/themes/zeppelin/bootstrap/css/ docs/0.8.2/asset...
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 = *