Open In App

Difference between AngularJS Expressions and JavaScript Expressions

Last Updated : 09 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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='GeeksforGeeks'">
          
<p>{{ name }} is a portal for geeks.</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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads