What is AngularJS Expressions

AngularJS Expressions

Let's first discus about what is expression.  In general term, an expression is a combination of one or more values, constants, variables, operators, and functions that computes to produce another value.

AngularJS expression is written inside double braces: {{expression}}.

AngularJS Expressions are used to bind data to view(HTML) that can be written inside double braces: {{ expression }}. It is much similar to JavaScript expressions. It can contain number, string, and Object.

Example: - {{2 + 3}} or {{ fName + " " + lName }} or {{ emp.fName + " " + emp.lName }}

In AngularJS expression can be divided in following:-

1.      Number Expressions

2.      String Expressions

3.       Object Expressions

4.      Array Expressions

AngularJS Numbers

Numbers are similar to JavaScript numbers in AngularJS

Example:-

<div ng-app="" ng-init="noOfItem=10;price=5">

    <p>Total in dollar: {{ noOfItem * price }}</p>

</div>

Also you can use ng-bind like below

<div ng-app="" ng-init="noOfItem=10;price=5">

    <p>Total in dollar: <span ng-bind="noOfItem * price"></span></p>

</div>

AngularJS Strings

Strings are like JavaScript strings in AngularJS:

Example:-

<div ng-app="" ng-init="fName='alok';lName='singh'">

    <p>Employee full name is {{ fName + " " + lName }}</p>

</div>

AngularJS Objects

Objects are like JavaScript objects in AngularJS:

Example:-

<div ng-app="" ng-init="emp={fName:'John',lName:'Doe'}">

    <p>The name is {{ emp.fName + " " + emp.lName }}</p>

</div>