The AngularJS expressions  are used to combine or bind application data to HTML. They are pure JavaScript expressions and gives results or outputs the data. The expressions behave just like ng-bind directives. The expressions are written in double curly brackets like {{expression}}.

AngularJS Expressions Type

  • Numerical Expression:

The expression in which we use numbers as an expression.

<p> Expenses {{cost * quantity}} Rs</p>
  • String Expression

The expression in which we use the string as an expression. In the below example we are using an expression that combines customer’s first name and customer’s last name.

<p> Hi {{ custoemr.fisrstname +""+ customer.lastname}}! </p>

Object Expression

The expression in which we use the expression as an object. Se the below example we are passing an object as an expression.

<p> Customer’s id {{customer.id}} </p>

Array Expression

The type of expression in which we use the expression as an array. Consider the following example for more understanding.

<p> Total Sale: {{sale [3]}} </p>

AngularJS Expression vs JavaScript Expression

AngularJS expressions are just like JavaScript expression but with a few differences. Let’s discuss the difference that separates AngularJS expression to JavaScript expression.

Context

The AngularJS expressions are evaluated against a scope object while JavaScript expressions are evaluated against the global window.

Forgiving

If we are trying to pass wrong properties, JavaScript generates “Reference error” or “type error” while in the case of AngularJS, expression evaluation is forgiving to “undefined” and “null”.

Filters

AngularJS expression and JavaScript expressions allow filter that can format the data before displaying it on the screen. Filters are the best features that can arrange the data or format the data and display it on the screen.

Control Statement

AngularJS expression does not support control flow statement like loop, conditionals, and exceptions.

Function Declaration

Angular Expression does not allow function declaration even inside the ng-init directive.

Literal Notation

AngularJS expressions do not allow the creation of regular expression in it.

New operator

AngularJS expression does not allow the use of new operators in it.

Use of Comma, Void operator and Bitwise

AngularJS restrict the use Bitwise, Comma, and void operators in an AngularJS expression.

For more and clear understanding consider the following example.

<!DOCTYPE html>
<html>
<head>
  <title>TutorialPace | AngularJS Expressions Example</title>
</head>
<body>
<h2>TutorialPace | AngularJS Expressions Example</h2>


  <div ng-app = "" ng-init = "quantity = 1;cost = 30; customer = {firstname:'Ali',lastname:'Ahmad',id:10};sales = [80,90,75,73,60]">
         <p>Hello {{customer.firstname + " " + customer.lastname}}!</p>
         <p>Expense : {{cost * quantity}} Rs</p>
         <p>Customer Id : {{customer.id}}</p>
         <p>Marks(Math): {{sales[3]}}</p>
    </div>
     
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

Download Example File

From the above description, we learned about the expressions in AngularJS which are used to bind application data to the HTML. The types of Expression and with their examples and another example that is showing the concept of all the expression. We also learned the difference between the use of AngularJS expression and JavaScript expression. Both expressions are almost the same but with little exceptions. This is it for this tutorial stay in touch for more useful tutorials.