Improve this DocAngular Expressions

Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}.

For example, these are valid expressions in Angular:

• 1+2
• a+b
• user.name
• items[index]

Angular Expressions vs. JavaScript Expressions

Angular expressions are like JavaScript expressions with the following differences:

• Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.

• Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.

• No Control Flow Statements: You cannot use the following in an Angular expression: conditionals, loops, or exceptions.

• No Function Declarations: You cannot decleare functions in an Angular expression. Even inside ng-init directive

• No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.

• No Comma And Void Operators: You cannot use , or void in an Angular expression.

• Filters: You can use filters within expressions to format data before displaying it.

If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view. If you want to eval() an Angular expression yourself, use the $eval() method.

You can try evaluating different expressions here:

Context

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

Angular expressions do not have access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.

Instead use services like $window and $location in functions called from expressions. Such services provide mockable access to globals.

Forgiving

Expression evaluation is forgiving to undefined and null. In JavaScript, evaluating a.b.c throws an exception if a is not an object. While this makes sense for a general purpose language, the expression evaluations are primarily used for data binding, which often look like this:

{{a.b.c}}

It makes more sense to show nothing than to throw an exception if a is undefined (perhaps we are waiting for the server response, and it will become defined soon). If expression evaluation wasn't forgiving we'd have to write bindings that clutter the code, for example: {{((a||{}).b||{}).c}}

Similarly, invoking a function a.b.c() on undefined or null simply returns undefined.

No Control Flow Statements

Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.

No function declarations or RegExp creation with literal notation

You can't declare functions or create regular expressions from within AngularJS expressions. This is to avoid complex model transformation logic inside templates. Such logic is better placed in a controller or in a dedicated filter where it can be tested properly.

$event

Directives like ngClick and ngFocus expose a $event object within the scope of that expression.

Note in the example above how we can pass in $event to clickMe, but how it does not show up in {{$event}}. This is because $event is outside the scope of that binding.