Expressions in AngularJS ({{ }})

In AngularJS, expressions are used to bind data to the HTML view. They allow dynamic updates to the content of the view based on changes to the underlying model. Expressions are written inside double curly braces ({{ }}) and are evaluated by AngularJS to display data, perform operations, or show the result of logic directly within the HTML.

1. What are Expressions in AngularJS?

An expression in AngularJS is a piece of code that is evaluated by the AngularJS framework and its result is inserted into the HTML view. The result of the expression is automatically updated in the DOM (Document Object Model) whenever the value in the model changes, thanks to AngularJS’s two-way data binding.

Expressions can contain variables, literals, operators, and functions. They are similar to JavaScript expressions, but AngularJS allows you to evaluate and bind them dynamically within the view.

2. Syntax of Expressions in AngularJS

The syntax for writing AngularJS expressions is quite simple. It is wrapped in double curly braces:

htmlCopyEdit{{ expression }}

Here, expression can be:

A variable from the $scope object.
A mathematical operation.
A function call.
A conditional check.
A filter for formatting data.

The AngularJS framework will automatically evaluate the expression, update the DOM, and display the result.

3. Example of Expressions in AngularJS

Let’s look at a simple example to understand how AngularJS expressions work:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Expressions Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

    <div ng-controller="myController">
        <h1>{{ message }}</h1> <!-- AngularJS Expression -->
        <h2>{{ 5 + 10 }}</h2> <!-- Expression with a simple calculation -->
        <h3>{{ user.firstName + " " + user.lastName }}</h3> <!-- Concatenating values -->
        <p>{{ 3 * 7 }}</p> <!-- Another mathematical expression -->
    </div>

    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            $scope.message = "Hello, AngularJS!";
            $scope.user = { firstName: "John", lastName: "Doe" };
        });
    </script>

</body>
</html>

Explanation:

{{ message }}: This expression evaluates and displays the value of $scope.message, which is “Hello, AngularJS!”.
{{ 5 + 10 }}: This expression evaluates the sum of 5 and 10, resulting in “15”.
{{ user.firstName + ” ” + user.lastName }}: This concatenates the first name and last name from the user object and displays “John Doe”.
{{ 3 * 7 }}: This performs a multiplication operation and displays “21”.

In this example, whenever the data inside $scope.message or $scope.user changes, the corresponding parts of the view will be updated automatically due to AngularJS’s two-way data binding.

4. Types of Expressions in AngularJS

Expressions in AngularJS can be used for various purposes, such as binding dynamic data, performing calculations, or applying filters.

A. Data Binding Expressions

These expressions bind data from the model (controller’s $scope) to the view. For example:

<p>{{ user.name }}</p>

In this case, user.name from the $scope object is displayed dynamically in the view.

B. Mathematical Expressions

AngularJS expressions can include simple arithmetic:

<p>{{ 10 * 5 }}</p> <!-- Result: 50 -->

C. Logical Expressions

You can use conditional or logical operators in expressions:

<p>{{ 5 > 3 }}</p> <!-- Result: true -->

D. Function Call Expressions

AngularJS allows you to call functions defined in your controller and display their result in the view:

<p>{{ calculateTotal(5, 10) }}</p>

app.controller('myController', function($scope) {
    $scope.calculateTotal = function(a, b) {
        return a + b;
    };
});

Here, calculateTotal(5, 10) will return 15, and this will be displayed in the view.

E. Filters in Expressions

AngularJS expressions can use filters to format data before displaying it:

<p>{{ 12345 | currency }}</p> <!-- Result: $12,345.00 -->
<p>{{ user.dob | date:'shortDate' }}</p> <!-- Formats a date -->

In this example, the currency filter formats the number as currency, and the date filter formats a date object.

5. Limitations of AngularJS Expressions

Although AngularJS expressions are powerful and flexible, there are a few important limitations to keep in mind:

A. No Statements Allowed

AngularJS expressions are not the same as JavaScript statements. Therefore, they cannot contain control structures like loops (for, while) or conditionals (if).

For example, this will not work:

{{ if (a > b) { return a; } else { return b; } }}

B. Cannot Access DOM or Window Object

AngularJS expressions are limited to data-binding, meaning they cannot directly manipulate the DOM or access objects like window, document, or console. This keeps expressions purely declarative and safe from side effects.

C. Only One-Way Binding in Expressions

While AngularJS supports two-way data binding for input fields (via ng-model), expressions themselves are one-way. They simply display data; any user input or updates in the view will not automatically update the model unless two-way data binding (via ng-model) is used.

6. Using Expressions with ng-bind

The ng-bind directive is another way to use expressions in AngularJS. It avoids the problem of unprocessed expressions in the view by directly binding the expression to the DOM.

Example:

<p ng-bind="message"></p>

Here, the message from the $scope will be bound to the <p> element, and any updates to the message property in the controller will reflect in the view.