---
layout: page
title: "Backend Angular API in Apache Zeppelin"
description: "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."
group: usage/display_system
---
{% include JB/setup %}
# Backend Angular API in Apache Zeppelin
## Overview
Angular display system treats output as a view template for [AngularJS](https://angularjs.org/).
It compiles templates and displays them inside of Apache Zeppelin. Zeppelin provides a gateway between your interpreter and your compiled **AngularJS view** templates.
Therefore, you can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.
## Basic Usage
### Print AngularJS view
To use angular display system, you should start with `%angular`.
Since `name` is not defined, `Hello {{name}}` will display `Hello`.
> **Please Note:** Display system is backend independent.
### Bind / Unbind Variables
Through **ZeppelinContext**, you can bind / unbind variables to **AngularJS view**. Currently, it only works in **Spark Interpreter ( scala )**.
```scala
// bind my 'object' as angular scope variable 'name' in current notebook.
z.angularBind(String name, Object object)
// bind my 'object' as angular scope variable 'name' in all notebooks related to current interpreter.
z.angularBindGlobal(String name, Object object)
// unbind angular scope variable 'name' in current notebook.
z.angularUnbind(String name)
// unbind angular scope variable 'name' in all notebooks related to current interpreter.
z.angularUnbindGlobal(String name)
```
Using the above example, let's bind `world` variable to `name`. Then you can see **AngularJs view** is immediately updated.
### Watch / Unwatch Variables
Through **ZeppelinContext**, you can watch / unwatch variables in **AngularJs view**. Currently, it only works in **Spark Interpreter ( scala )**.
```scala
// register for angular scope variable 'name' (notebook)
z.angularWatch(String name, (before, after) => { ... })
// unregister watcher for angular variable 'name' (notebook)
z.angularUnwatch(String name)
// register for angular scope variable 'name' (global)
z.angularWatchGlobal(String name, (before, after) => { ... })
// unregister watcher for angular variable 'name' (global)
z.angularUnwatchGlobal(String name)
```
Let's make a button. When it is clicked, the value of `run` will be increased 1 by 1.
`z.angularBind("run", 0)` will initialize `run` to zero. And then, it will be also applied to `run` in `z.angularWatch()`.
When the button is clicked, you'll see both `run` and `numWatched` are incremented by 1.
## Let's make it Simpler and more Intuitive
In this section, we will introduce a simpler and more intuitive way of using **Angular Display System** in Zeppelin.
Here are some usages.
### Import
```scala
// In notebook scope
import org.apache.zeppelin.display.angular.notebookscope._
import AngularElem._
// In paragraph scope
import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._
```
### Display Element
```scala
// automatically convert to string and print with %angular display system directive in front.
.display
```
### Event Handler
```scala
// on click
.onClick(() => {
my callback routine
}).display
// on change
.onChange(() => {
my callback routine
}).display
// arbitrary event
.onEvent("ng-click", () => {
my callback routine
}).display
```
### Bind Model
```scala
// bind model
.model("myModel").display
// bind model with initial value
.model("myModel", initialValue).display
```
### Interact with Model
```scala
// read model
AngularModel("myModel")()
// update model
AngularModel("myModel", "newValue")
```
### Example: Basic Usage
Using the above basic usages, you can apply them like below examples.
#### Display Elements
```scala
Hello Angular Display System
.display
```
#### OnClick Event
```scala
Click me
.onClick{() =>
// callback for button click
}.display
```
#### Bind Model
{% raw %}
```scala
{{{{myModel}}}}
.model("myModel", "Initial Value").display
```
{% endraw %}
#### Interact With Model
```scala
// read the value
AngularModel("myModel")()
// update the value
AngularModel("myModel", "New value")
```
### Example: String Converter
Using below example, you can convert the lowercase string to uppercase.
{% raw %}
```scala
// clear previously created angular object.
AngularElem.disassociate
val button =
Convert
.onClick{() =>
val inputString = AngularModel("input")().toString
AngularModel("title", inputString.toUpperCase)
}
{
{{{{title}}}}
.model("title", "Please type text to convert uppercase") }
Your text { .model("input", "") }
{button}
Since `name` is not defined, `Hello {{name}}` will display `Hello`.
> **Please Note:** Display system is backend independent.
`z.angularBind("run", 0)` will initialize `run` to zero. And then, it will be also applied to `run` in `z.angularWatch()`.
When the button is clicked, you'll see both `run` and `numWatched` are incremented by 1.
## Let's make it Simpler and more Intuitive
In this section, we will introduce a simpler and more intuitive way of using **Angular Display System** in Zeppelin.
Here are some usages.
### Import
```scala
// In notebook scope
import org.apache.zeppelin.display.angular.notebookscope._
import AngularElem._
// In paragraph scope
import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._
```
### Display Element
```scala
// automatically convert to string and print with %angular display system directive in front.
.display
```
### Event Handler
```scala
// on click
.onClick(() => {
my callback routine
}).display
// on change
.onChange(() => {
my callback routine
}).display
// arbitrary event
.onEvent("ng-click", () => {
my callback routine
}).display
```
### Bind Model
```scala
// bind model
.model("myModel").display
// bind model with initial value
.model("myModel", initialValue).display
```
### Interact with Model
```scala
// read model
AngularModel("myModel")()
// update model
AngularModel("myModel", "newValue")
```
### Example: String Converter
Using below example, you can convert the lowercase string to uppercase.
{% raw %}
```scala
// clear previously created angular object.
AngularElem.disassociate
val button = 