Apache Zeppelin 0.10.1 Documentation: Frontend Angular API in Apache Zeppelin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Apache Zeppelin 0.10.1 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">  <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">  <link href="/docs/0.10.1/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/docs/0.10.1/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css"> <link href="/docs/0.10.1/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/js/docs.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/js/anchor.min.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/js/toc.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/js/lunr.min.js"></script> <script src="/docs/0.10.1/assets/themes/zeppelin/js/search.js"></script>  <link href="/docs/0.10.1/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed"> <link href="/docs/0.10.1/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.10.1/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.10.1" style="font-size: 15px; color: white;"> 0.10.1 </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.10.1/quickstart/install.html">Install</a></li> <li><a href="/docs/0.10.1/quickstart/explore_ui.html">Explore UI</a></li> <li><a href="/docs/0.10.1/quickstart/tutorial.html">Tutorial</a></li> <li role="separator" class="divider"></li> <li class="title"><span>Run Mode</span></li> <li><a href="/docs/0.10.1/quickstart/kubernetes.html">Kubernetes</a></li> <li><a href="/docs/0.10.1/quickstart/docker.html">Docker</a></li> <li><a href="/docs/0.10.1/quickstart/yarn.html">Yarn</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.1/quickstart/spark_with_zeppelin.html">Spark with Zeppelin</a></li> <li><a href="/docs/0.10.1/quickstart/flink_with_zeppelin.html">Flink with Zeppelin</a></li> <li><a href="/docs/0.10.1/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li> <li><a href="/docs/0.10.1/quickstart/python_with_zeppelin.html">Python with Zeppelin</a></li> <li><a href="/docs/0.10.1/quickstart/r_with_zeppelin.html">R 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.10.1/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.10.1/usage/display_system/basic.html#text">Text Display</a></li> <li><a href="/docs/0.10.1/usage/display_system/basic.html#html">HTML Display</a></li> <li><a href="/docs/0.10.1/usage/display_system/basic.html#table">Table Display</a></li> <li><a href="/docs/0.10.1/usage/display_system/basic.html#network">Network Display</a></li> <li><a href="/docs/0.10.1/usage/display_system/angular_backend.html">Angular Display using Backend API</a></li> <li><a href="/docs/0.10.1/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.10.1/usage/interpreter/overview.html">Overview</a></li> <li><a href="/docs/0.10.1/usage/interpreter/interpreter_binding_mode.html">Interpreter Binding Mode</a></li> <li><a href="/docs/0.10.1/usage/interpreter/user_impersonation.html">User Impersonation</a></li> <li><a href="/docs/0.10.1/usage/interpreter/dependency_management.html">Dependency Management</a></li> <li><a href="/docs/0.10.1/usage/interpreter/installation.html">Installing Interpreters</a></li>  <li><a href="/docs/0.10.1/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.10.1/usage/other_features/publishing_paragraphs.html">Publishing Paragraphs</a></li> <li><a href="/docs/0.10.1/usage/other_features/personalized_mode.html">Personalized Mode</a></li> <li><a href="/docs/0.10.1/usage/other_features/customizing_homepage.html">Customizing Zeppelin Homepage</a></li> <li><a href="/docs/0.10.1/usage/other_features/notebook_actions.html">Notebook Actions</a></li> <li><a href="/docs/0.10.1/usage/other_features/cron_scheduler.html">Cron Scheduler</a></li> <li><a href="/docs/0.10.1/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.10.1/usage/rest_api/interpreter.html">Interpreter API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/zeppelin_server.html">Zeppelin Server API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/notebook.html">Notebook API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/notebook_repository.html">Notebook Repository API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/configuration.html">Configuration API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/credential.html">Credential API</a></li> <li><a href="/docs/0.10.1/usage/rest_api/helium.html">Helium API</a></li> <li class="title"><span>Zeppelin SDK</span></li> <li><a href="/docs/0.10.1/usage/zeppelin_sdk/client_api.html">Client API</a></li> <li><a href="/docs/0.10.1/usage/zeppelin_sdk/session_api.html">Session 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.10.1/setup/basics/how_to_build.html">How to Build Zeppelin</a></li> <li><a href="/docs/0.10.1/setup/basics/hadoop_integration.html">Hadoop Integration</a></li> <li><a href="/docs/0.10.1/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.10.1/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark Cluster Mode: Standalone</a></li> <li><a href="/docs/0.10.1/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark Cluster Mode: YARN</a></li> <li><a href="/docs/0.10.1/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark Cluster Mode: Mesos</a></li> <li><a href="/docs/0.10.1/setup/deployment/flink_and_spark_cluster.html">Zeppelin with Flink, Spark Cluster</a></li> <li><a href="/docs/0.10.1/setup/deployment/cdh.html">Zeppelin on CDH</a></li> <li><a href="/docs/0.10.1/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.10.1/setup/security/authentication_nginx.html">HTTP Basic Auth using NGINX</a></li> <li><a href="/docs/0.10.1/setup/security/shiro_authentication.html">Shiro Authentication</a></li> <li><a href="/docs/0.10.1/setup/security/notebook_authorization.html">Notebook Authorization</a></li> <li><a href="/docs/0.10.1/setup/security/datasource_authorization.html">Data Source Authorization</a></li> <li><a href="/docs/0.10.1/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.10.1/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li> <li><a href="/docs/0.10.1/setup/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li> <li><a href="/docs/0.10.1/setup/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li> <li><a href="/docs/0.10.1/setup/storage/storage.html#notebook-storage-in-oss">OSS Storage</a></li> <li><a href="/docs/0.10.1/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub Storage</a></li> <li><a href="/docs/0.10.1/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.10.1/setup/operation/configuration.html">Configuration</a></li> <li><a href="/docs/0.10.1/setup/operation/proxy_setting.html">Proxy Setting</a></li> <li><a href="/docs/0.10.1/setup/operation/upgrading.html">Upgrading</a></li> <li><a href="/docs/0.10.1/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.10.1/usage/interpreter/overview.html">Overview</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.1/interpreter/spark.html">Spark</a></li> <li><a href="/docs/0.10.1/interpreter/flink.html">Flink</a></li> <li><a href="/docs/0.10.1/interpreter/jdbc.html">JDBC</a></li> <li><a href="/docs/0.10.1/interpreter/python.html">Python</a></li> <li><a href="/docs/0.10.1/interpreter/r.html">R</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.1/interpreter/alluxio.html">Alluxio</a></li> <li><a href="/docs/0.10.1/interpreter/beam.html">Beam</a></li> <li><a href="/docs/0.10.1/interpreter/bigquery.html">BigQuery</a></li> <li><a href="/docs/0.10.1/interpreter/cassandra.html">Cassandra</a></li> <li><a href="/docs/0.10.1/interpreter/elasticsearch.html">Elasticsearch</a></li> <li><a href="/docs/0.10.1/interpreter/geode.html">Geode</a></li> <li><a href="/docs/0.10.1/interpreter/groovy.html">Groovy</a></li> <li><a href="/docs/0.10.1/interpreter/hazelcastjet.html">Hazelcast Jet</a></li> <li><a href="/docs/0.10.1/interpreter/hbase.html">HBase</a></li> <li><a href="/docs/0.10.1/interpreter/hdfs.html">HDFS</a></li> <li><a href="/docs/0.10.1/interpreter/hive.html">Hive</a></li> <li><a href="/docs/0.10.1/interpreter/ignite.html">Ignite</a></li> <li><a href="/docs/0.10.1/interpreter/influxdb.html">influxDB</a></li> <li><a href="/docs/0.10.1/interpreter/java.html">Java</a></li> <li><a href="/docs/0.10.1/interpreter/jupyter.html">Jupyter</a></li> <li><a href="/docs/0.10.1/interpreter/kotlin.html">Kotlin</a></li> <li><a href="/docs/0.10.1/interpreter/ksql.html">KSQL</a></li> <li><a href="/docs/0.10.1/interpreter/kylin.html">Kylin</a></li> <li><a href="/docs/0.10.1/interpreter/lens.html">Lens</a></li> <li><a href="/docs/0.10.1/interpreter/livy.html">Livy</a></li> <li><a href="/docs/0.10.1/interpreter/mahout.html">Mahout</a></li> <li><a href="/docs/0.10.1/interpreter/markdown.html">Markdown</a></li> <li><a href="/docs/0.10.1/interpreter/mongodb.html">MongoDB</a></li> <li><a href="/docs/0.10.1/interpreter/neo4j.html">Neo4j</a></li> <li><a href="/docs/0.10.1/interpreter/pig.html">Pig</a></li> <li><a href="/docs/0.10.1/interpreter/postgresql.html">Postgresql, HAWQ</a></li> <li><a href="/docs/0.10.1/interpreter/sap.html">SAP</a></li> <li><a href="/docs/0.10.1/interpreter/scalding.html">Scalding</a></li> <li><a href="/docs/0.10.1/interpreter/scio.html">Scio</a></li> <li><a href="/docs/0.10.1/interpreter/shell.html">Shell</a></li> <li><a href="/docs/0.10.1/interpreter/sparql.html">Sparql</a></li> <li><a href="/docs/0.10.1/interpreter/submarine.html">Submarine</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.10.1/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.10.1/development/helium/overview.html">Overview</a></li> <li><a href="/docs/0.10.1/development/helium/writing_application.html">Writing Helium Application</a></li> <li><a href="/docs/0.10.1/development/helium/writing_spell.html">Writing Helium Spell</a></li> <li><a href="/docs/0.10.1/development/helium/writing_visualization_basic.html">Writing Helium Visualization: Basics</a></li> <li><a href="/docs/0.10.1/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.10.1/setup/basics/how_to_build.html">How to Build Zeppelin</a></li> <li><a href="/docs/0.10.1/development/contribution/useful_developer_tools.html">Useful Developer Tools</a></li> <li><a href="/docs/0.10.1/development/contribution/how_to_contribute_code.html">How to Contribute (code)</a></li> <li><a href="/docs/0.10.1/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" rel="noopener noreferrer" href="https://zeppelin.apache.org/community.html">Mailing List</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://cwiki.apache.org/confluence/display/ZEPPELIN/Zeppelin+Home">Apache Zeppelin Wiki</a></li> <li><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/apache-zeppelin">Stackoverflow Questions about Zeppelin</a></li> </ul> </li> <li> <a href="/docs/0.10.1/search.html" class="nav-search-link"> <span class="fa fa-search nav-search-icon"></span> </a> </li> </ul> </nav> </div> </div> <div class="content">  <div class="row"> <div class="col-md-12">  <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="html language-html" data-lang="html">%angular <span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"superheroId"</span><span class="nt">></span>Super Hero: <span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"superheroId"</span> <span class="na">placeholder=</span><span class="s">"Superhero name ..."</span> <span class="na">ng-model=</span><span class="s">"superhero"</span><span class="nt">></input></span> <span class="nt"></div></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">ng-click=</span><span class="s">"z.angularBind('superhero',superhero,'20160222-232336_1472609686')"</span><span class="nt">></span> Bind<span class="nt"></button></span> <span class="nt"></form></span> </code></pre></div> <p><img src="/docs/0.10.1/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="html language-html" data-lang="html">%angular <span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">ng-click=</span><span class="s">"z.angularUnbind('superhero','20160222-232336_1472609686')"</span><span class="nt">></span> UnBind<span class="nt"></button></span> <span class="nt"></form></span> </code></pre></div> <p><img src="/docs/0.10.1/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="javascript language-javascript" data-lang="javascript"><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="html language-html" data-lang="html">%angular <span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"paragraphId"</span><span class="nt">></span>Paragraph Id: <span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"paragraphId"</span> <span class="na">placeholder=</span><span class="s">"Paragraph Id ..."</span> <span class="na">ng-model=</span><span class="s">"paragraph"</span><span class="nt">></input></span> <span class="nt"></div></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">ng-click=</span><span class="s">"z.runParagraph(paragraph)"</span><span class="nt">></span> Run Paragraph<span class="nt"></button></span> <span class="nt"></form></span> </code></pre></div> <p><img src="/docs/0.10.1/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.10.1/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>  </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>

CINXE.COM

Apache Zeppelin 0.10.1 Documentation: Frontend Angular API in Apache Zeppelin