AngularJS Expressions (original) (raw)
Last Updated : 08 Jun, 2023
In this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples.
Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is written. The expressions in AngularJS are written in double braces: {{ expression }}. They behave similar to ng-bind directives: ng-bind=”expression”.
Syntax:
{{ expression }}
Example 1: This example displays the name that we feed in the ng-init directive.
HTML
<!DOCTYPE html>
< html >
< head >
`` < script src =
`` </ script >
`` < title >AngularJS Expression</ title >
</ head >
< body style = "text-align:center" >
`` < h1 style = "color:green" >GeeksforGeeks</ h1 >
`` < h3 >AngularJS Expressions</ h3 >
`` < div ng-app = ""
`` ng-init = "name='GeeksforGeeks'" >
`` < p > {{ name }} is a portal for geeks.</ p >
`` </ div >
</ body >
</ html >
Output:
Example 2: This example displays the content of the object that we feed in the ng-init directive.
HTML
<!DOCTYPE html>
< html >
< head >
`` < script src =
`` </ script >
`` < title >AngularJS Expression</ title >
</ head >
< body >
`` < h1 style = "color:green" >
`` GeeksforGeeks
`` </ h1 >
`` < h3 >AngularJS Expressions</ h3 >
`` < div ng-app = ""
`` ng-init="sort={one:'quick sort',
`` two:'merge sort',
`` three:'bubble sort'}">
`` < p > Sorting Algorithms:</ p >
`` < ul >
`` < li >{{ sort.one }}</ li >
`` < li >{{ sort.two }}</ li >
`` < li >{{ sort.three }}</ li >
`` </ ul >
`` </ div >
</ body >
</ html >
Output:
Example 3: This example illustrates the implementation of the objects with the Expression in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
`` < script src =
`` </ script >
</ head >
< body >
`` < center >
`` < h1 style = "color:green" >
`` GeeksforGeeks
`` </ h1 >
`` < h3 style = "color:green" >
`` AngularJS Expressions
`` </ h3 >
`` < div ng-app = "" ng-init="data={Course:'AngularJS',
`` topic:'Expression'}">
`` < p >This is
`` < span ng-bind = "data.Course" ></ span >
`` < span ng-bind = "data.topic" ></ span >
`` Tutorial
`` </ p >
`` </ div >
`` </ center >
</ body >
</ html >
Output:
Difference between AngularJS Expression & Javascript Expression:
| Parameters | Angularjs Expression | JavaScript Expression |
|---|---|---|
| Context | Angular expressions are evaluated against a scope object. | JavaScript expressions are evaluated against the global window. |
| Forgiving | In Angular, expression evaluation is forgiving to undefined and null. | JavaScript expression tries to evaluate undefined properties and generates ReferenceError or TypeError. |
| Control Flow Statements | Control flow statements cannot be used in angularjs expressions, i.e, loop, conditional, or exception | Control flow statements can be used in JavaScript expressions |
| Function Declarations | Angular Expressions do not allow function declaration, not even inside the ng-init directive. | The function declaration is allowed in JavaScript expressions |
| Bitwise, Comma, And Void Operators | In an Angular expression, Bitwise or void operators cannot be used. | You can use Bitwise, or void operators in a JavaScript expression. |
| Filter | Angular expressions can work with filter | JavaScript expressions do not work with filter |
| One time binding | One-time binding is supported by AngularJS. To create one-time binding use :: expression. | JavaScript expressions do not allow one-time binding. |