Learning AngularJS Expressions in HTML

AngularJS Expressions

AngularJS Expressions are like the JavaScript code snippets that are mainly used for binding purposes. Angular expressions are always used to bind the data to HTML DOM element. All the expressions come inside the double braces {{expression}}.

Angular Expression can also be written inside directive attributes such as ng-bind="expression",ng-click="functionExpression()" etc.

AngularJS Expressions Vs JavaScript Expressions

There are some similarities and differences between Angular Expressions and JavaScript Expressions. The majority of them are listed below.

JavaScript expressions are evaluated against the global window and in Angular expressions are evaluated against a scope object.
Angular Expressions does not support conditional statements, loops, and exceptions while on the other hand JavaScript expression supports all these features.
Angular Supports filters within an expression to format the data while JavaScript does not support the filters.
You cannot create regular expressions in angular expression while on the other hand JavaScript supports the regular expression feature.
Both JavaScript and Angular supports Literals, operators and variables inside the expression.

How to use AngularJS Expressions

Angular Expression with Numbers

{{ 3 * 4 }}

The above code will be evaluated by Angular and the result will be displayed in the DOM as 12.

Angular Expression with Strings

<div ng-init="firstName='Mother';lastName='Teresa'">
    <p>String Concatenation is <strong>{{ firstName + ' ' + lastName }}</strong></p>
    <p>String Concatenation using ng-bind <strong><span ng-bind="firstName + ' ' + lastName"></span></strong></p>
</div>

Angular Expression using Objects

<div ng-init="person={firstName:'Mark',lastName:'Zuckerberg'}">
    <p>String Concatenation using AngularJS Objects <strong>{{ person.lastName }}</strong></p>
</div>

Angular Expression with Arrays

<div ng-init="sampleArray=[10,22,30,40,50]">
    <p>The fourth element of Array is <strong>{{ sampleArray[3] }}</strong></p>
</div>

Following examples is the combination of all the above AngularJS Expressions

<!DOCTYPE html>
<html>
<head>
    <title>Angular Expressions</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-app="">

    <div>
        <p>Multiplication of 4 * 3 is <strong>{{ 4 * 3 }}</strong></p>
    </div>

    <div ng-init="firstName='Mother';lastName='Teresa'">
        <p>String Concatenation is <strong>{{ firstName + ' ' + lastName }}</strong></p>
        <p>String Concatenation using ng-bind <strong><span ng-bind="firstName + ' ' + lastName"></span></strong></p>
    </div>

    <div ng-init="person={firstName:'Mark',lastName:'Zuckerberg'}">
        <p>String Concatenation using AngularJS Objects <strong>{{ person.lastName }}</strong></p>
    </div>

    <div ng-init="sampleArray=[10,22,30,40,50]">

        <p>The fourth element of Array is <strong>{{ sampleArray[3] }}</strong></p>

    </div>

</body>
</html>

The output of the above sample application when you run in the browser.

Multiplication of 4 * 3 is 12

String Concatenation is Mother Teresa

String Concatenation using ng-bind Mother Teresa

String Concatenation using AngularJS Objects Zuckerberg

The fourth element of Array is 40