@name Developer Guide: Understanding Angular Expressions

Expressions are {@link dev_guide.templates.databinding bindings} that you write in HTML and embed

in templates in order to create views in angular. Angular expressions are similar but not

equivalent to JavaScript expressions.

* `1+2={{1+2}}`

* `3*10|currency`

* `Hello {{name}}!`

* `Hello {{'World'}}!`

not entirely correct. Angular does not use a simple JavaScript eval of the expression text. You can

think of angular expressions as JavaScript expressions with these differences:

* **Attribute Evaluation:** evaluation of all attributes are against the current scope, not to the

global window as in JavaScript.

* **Forgiving:** expression evaluation is forgiving to undefined and null, unlike in JavaScript.

* **No Control Flow Statements:** you cannot do the following from an angular expression:

conditionals, loops, or throw.

* **Type Augmentation:** the scope expression evaluator augments built-in types.

* **Filters:** you can add filters to an expression, for example to convert raw data into a

human-readable format.

* **The $:** angular reserves this prefix to differentiate its API names from others.

controller method and call that. If you want to `eval()` an angular expression from JavaScript, use

the `Scope:$eval()` method.

# Attribute Evaluation

Evaluation of all attributes takes place against the current scope. Unlike JavaScript, where names

default to global window properties, angular expressions have to use `$window` to refer to the

global object. For example, if you want to call `alert()`, which is defined on `window`, an

expression must use `$window.alert()`. This is done intentionally to prevent accidental access to

the global state (a common source of subtle bugs).

Assignments work the same way in reverse:

a.b.c = 10

...creates the intermediary objects even if a is undefined.

conditional (including ternary operators), loop, or to throw from a view expression, delegate to a

JavaScript method instead.

## Type Augmentation

Built-in types have methods like `[].push()`, but the richness of these methods is limited.

Consider the example below, which allows you to do a simple search over a canned set of contacts.

The example would be much more complicated if we did not have the `Array:$filter()`. There is no

built-in method on `Array` called {@link api/angular.module.ng.$filter.filter $filter} and angular doesn't add

it to `Array.prototype` because that could collide with other JavaScript frameworks.

For this reason the scope expression evaluator augments the built-in types to make them act like

they have extra methods. The actual method for `$filter()` is `angular.module.ng.$filter.filter()`. You can

call it from JavaScript.

Extensions: You can further extend the expression vocabulary by adding new methods to

`angular.module.ng.$filter` or `angular.String`, etc.

<doc:example>

<doc:source>

<div ng-init="friends = [

{name:'John', phone:'555-1212'},

{name:'Mary', phone:'555-9876'},

{name:'Mike', phone:'555-4321'},

{name:'Adam', phone:'555-5678'},

{name:'Julie', phone:'555-8765'}]"></div>

Search: <input ng-model="searchText"/>

<table class="example3">

<thead>

<tr><th>Name</th><th>Phone</th><tr>

</thead>

<tbody>

<tr ng-repeat="friend in friends | filter:searchText">

<td>{{friend.name}}</td>

<td>{{friend.phone}}</td>

</tr>

</tbody>

</table>

</doc:source>

<doc:scenario>

it('should filter the list', function() {

var tr = using('table.example3 tbody').repeater('tr');

expect(tr.count()).toBe(5);

input('searchText').enter('a');

expect(tr.count()).toBe(2);

});

</doc:scenario>

</doc:example>

The expression evaluator simply passes the value of name to angular.module.ng.$filter.uppercase.

You can also pass colon-delimited arguments to filters, for example, to display the number 123 with

2 decimal points:

## Related Topics

* {@link dev_guide.templates.filters Understanding Angular Filters}

## Related API

* {@link api/angular.module.ng.$compile Angular Compiler API}