Skip to content
Related Articles

Related Articles

AngularJS Expressions

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 09 Aug, 2022

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 Expession</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:
            <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>
<script src=
</script>
  
<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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!