AngularJS Expressions

AngularJS expressions are a powerful feature that allows you to dynamically bind data to your HTML templates. They function similarly to JavaScript expressions but are designed specifically for AngularJS applications. With AngularJS expressions, you can display values, perform calculations, and even manipulate data directly in your HTML.

In this guide, we’ll explore AngularJS expressions, their syntax, features, and practical use cases. For more programming tutorials, visit The Coding College.

What Are AngularJS Expressions?

AngularJS expressions are snippets of code written within curly braces ({{ }}) that bind data to the view. These expressions allow you to display data, perform operations, or handle logic directly within your HTML.

Example:

<p>{{ 5 + 5 }}</p>

This expression will display 10 in the browser.

Key Features of AngularJS Expressions

1. Similar to JavaScript: AngularJS expressions can use operators, methods, and variables just like JavaScript.
2. No Side Effects: Expressions are pure and cannot alter application data or perform actions like loops.
3. Contextual Execution: Expressions are evaluated in the context of the current scope.
4. Automatic Updates: When data changes in the scope, the view updates automatically.

AngularJS Expression Syntax

AngularJS expressions are enclosed within double curly braces ({{ expression }}).

Example: Binding a Variable

<div ng-app="myApp" ng-controller="myCtrl">
    <p>Name: {{ name }}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
    });
</script>

Output:

Name: John Doe

Using AngularJS Expressions

1. Performing Calculations

AngularJS expressions can handle arithmetic operations.

<p>Sum: {{ 10 + 20 }}</p>
<p>Multiplication: {{ 5 * 3 }}</p>

Output:

Sum: 30  
Multiplication: 15  

2. Using Variables

Expressions can dynamically display variables from the scope.

<p>Total Price: {{ price * quantity }}</p>

3. Conditional Logic

Expressions can include simple conditional checks.

<p>{{ age >= 18 ? 'Adult' : 'Minor' }}</p>

Common Use Cases for AngularJS Expressions

• Data Display: Show user data, calculation results, or any dynamic content.
• Text Formatting: Combine strings or format text dynamically. Example:

<p>{{ firstName + ' ' + lastName }}</p>

• Filters: Format data using AngularJS filters. Example:

<p>Price: {{ price | currency }}</p>

Restrictions of AngularJS Expressions

• No Loops: AngularJS expressions cannot contain loops (for, while).
• No Assignments: You cannot assign values (e.g., x = 10) within expressions.
• Limited Functionality: Complex logic or operations requiring multiple steps should be implemented in the controller, not in expressions.

AngularJS Expressions vs JavaScript

Practical Example: Dynamic Invoice

<div ng-app="invoiceApp" ng-controller="invoiceCtrl">
    <p>Item: {{ itemName }}</p>
    <p>Quantity: {{ quantity }}</p>
    <p>Price per Unit: {{ price | currency }}</p>
    <p>Total: {{ quantity * price | currency }}</p>
</div>

<script>
    var app = angular.module('invoiceApp', []);
    app.controller('invoiceCtrl', function($scope) {
        $scope.itemName = "Laptop";
        $scope.quantity = 2;
        $scope.price = 50000;
    });
</script>

Output:

Item: Laptop  
Quantity: 2  
Price per Unit: ₹50,000.00  
Total: ₹1,00,000.00  

Conclusion

AngularJS expressions are a simple yet powerful feature that bridges the gap between the model and the view in your applications. They enable developers to display and manipulate data dynamically without requiring additional code in the controller.