In this article, we will see what are AngularJS Expressions & JavaScript expressions, along with understanding their basic implementation through the illustrations & understand the differences between them.
Angularjs Expression: Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by Angular and the result is returned back to where the expression is written. The expressions in AngularJS are written in double braces: {{ expression }}. They behave similarly to ng-bind directives: ng-bind=”expression”. For instance, below are the expressions.
<div>
3 + 3= {{3 + 3}}
3 - 3 = {{3 - 3}}
3 * 3 = {{3 * 3}}
3 / 3 = {{3 / 3}}
</div>
Example: This example describes the Angular JS Expressions.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <title>AngularJS Introduction</title> </head> <body style="text-align: center"> <h2 style="color: green"> AngularJS Expressions </h2> <div ng-app="" ng-init="name='neveropen'"> <p>{{ name }} is a portal for neveropen.</p> </div> </body> </html> |
Output:
Angular Expression
JavaScript Expression: If a valid set of literals, variables, operators, and expressions that evaluate a single value that is an expression. This single value can be a number, a string, or a logical value as depending expression. With the concept, there are two types of expressions.
Assigned a value to a variable:
x = 11
Simply have a value:
22 + 11
JavaScript has the following kinds of expressions:
- Arithmetic: These are the expressions that evaluate a number.
- Logical: These are the expressions that evaluate true or false.
- String: These are the expressions that evaluate a character string, for example, “Geek” or “987”.
Please refer to the JavaScript Expressions Complete Reference article for the detailed descriptions of the Javascript Expressions
Note: The special keyword null denotes a null value.
Example: This example describes the Basic expressions in Javascript.
Javascript
<script> function callAdd(x, y){ let z = x + y; return z; } console.log("Addition : " + callAdd(7, 4)); </script> |
Output:
Addition : 11
Difference between Angular expression and JavaScript expression:
Parameter |
Angularjs expression |
JavaScript expression |
|---|---|---|
| Context |
Angular expressions are evaluated against a scope one-timeobject. |
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. |
