Angular Interpreter

Please note that this feature is in beta and is only available for selected customers.

The AngularJS interpreter is the port of the Frontend Angular API in Apache Zeppelin .

Using the AngularJS interpreter you can render AngularJS 1.7 templates on Zepl paragraphs and leverage the robust two-way binding system. Similar to Apache Zeppelin we expose a simple AngularJS z object on the front-end side to expose the same capabilities. This z object is accessible in the Angular isolated scope for each paragraph.

You don't need to create new resources or interpreters to start using the Angular interpreter. All you need to do is add the magic keyword %angular to the first line of your paragraph.


Actions API
Initiate binding z.angularBind(var, initialValue, paragraphId)
Update value z.angularBind(var, newValue, paragraphId)
Destroy binding z.angularUnbind(var, paragraphId)
Execute Paragraph z.runParagraph(paragraphId)

Basic example


<form class="form-inline">
  <div class="form-group">
    <label for="superheroId">Super Hero: </label>
    <input type="text" class="form-control" id="superheroId" placeholder="Superhero name ..." ng-model="superhero"></input>
  <p>We will bind {{superhero}} to next paragraph</p>
  <button type="submit" class="btn btn-primary" ng-click="z.angularBind('superhero',superhero,'20181127-043625_2107755481')"> Bind</button>
  <button type="submit" class="btn btn-primary" ng-click="z.runParagraph('20181127-043625_210775548')"> Run {{superhero}}</button>
  <button type="submit" class="btn btn-primary" ng-click="z.angularUnbind('superhero','20181127-043625_210775548')"> UnBind {{superhero}}</button>

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="//" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">SuperHero</h5>
    <p class="card-text">{{superhero}}</p>

Angular API

We support Angular's ng-directives and ng-filters. You can combine these to build interactive applications on the front-end.


The following example uses ng-init, ng-model and ng-repeat directives and ng-filter(filter:searchText) to make a filterable table.


<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults" class="table">
    <tr ng-repeat="friend in friends | filter:searchText">