Saturday, 22 December 2018

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>