AngularJS Expressions

We have already learnt the basics of AngularJS. This tutorial explains the AngularJS expressions in simple way.

AngularJS Expressions

  1. Whenever we write AngularJS Expression then we need to write them in the pair of double curly braces.
{{ expression }}
  1. AngularJS expressions binds data to HTML using ng-bind directive. It will print the output of the expression where expression appears
  2. AngularJS expressions can have literals, operators and variables as operands of the expression

Examples

Example #1 : AngularJS Expressions

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <p>Expression Ex 1 : {{ 10 + 10 }}</p>
    <p>Expression Ex 2 : {{ 10 - 10 }}</p>
    <p>Expression Ex 3 : {{ 10 * 10 }}</p>
    <p>Expression Ex 4 : {{ 10 / 10 }}</p>
    <p>Expression Ex 5 : {{ 10 % 10 }}</p>
</div>
</body>
</html>

Output :

Expression Ex 1 : 20
Expression Ex 2 : 0
Expression Ex 3 : 100
Expression Ex 4 : 1
Expression Ex 5 : 0

Example #2 : Introducing number and variables

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="num1=10;num2=10">
    <p>Expression Ex 1 : {{ num1 + num2 }}</p>
    <p>Expression Ex 2 : {{ num1 - num2 }}</p>
    <p>Expression Ex 3 : {{ num1 * num2 }}</p>
    <p>Expression Ex 4 : {{ num1 / num2 }}</p>
    <p>Expression Ex 5 : {{ num1 % num2 }}</p>
</div>
</body>
</html>

Output :

Expression Ex 1 : 20
Expression Ex 2 : 0
Expression Ex 3 : 100
Expression Ex 4 : 1
Expression Ex 5 : 0

In this example we have declared the two variables num1 and num2 which are initialized to 10.

Example #3 : String in expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>My name : {{ fname + " " + lname }}</p>
</div>
</body>
</html>

Output :

My name : Pritesh Taral

In order to initialize the variable with string value we need to use string in pair of single quotation mark

Example #4 : Objects in AngularJS expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="author={fname:'Pritesh',lname:'Taral'}">
   <p>My First name : {{ author.fname }}</p>
   <p>My Last name  : {{ author.lname }}</p>
</div>
</body>
</html>

Output :

My First name : Pritesh
My Last name : Taral

We have declared the variable of type object and name of variable is author

author = { 
         fname:'Pritesh',
         lname:'Taral'
         }

In order to access the value of object in AngularJS Expressions we can use dot operator

Expression in AngularJS Output printed
{{ author.fname }} Pritesh
{{ author.lname }} Taral

Example #5 : Array in AngularJS expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="marks=[70,75,80,85,90]">
   <p>Marks of student 1 : {{ marks[0] }}</p>
   <p>Marks of student 2 : {{ marks[1] }}</p>
   <p>Marks of student 3 : {{ marks[2] }}</p>
   <p>Marks of student 4 : {{ marks[3] }}</p>
   <p>Marks of student 5 : {{ marks[4] }}</p>
</div>
</body>
</html>

Output :

Marks of student 1 : 70
Marks of student 2 : 75
Marks of student 3 : 80
Marks of student 4 : 85
Marks of student 5 : 90

In this tutorial we have declared an array which is accessed in the AngularJS Expressions using the arrayname and subscript variable

Example #6 : ng-bind directive in AngularJS

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="marks=[70,75,80,85,90]">
   <p>Marks of Student 1 : <span ng-bind="marks[0]"></span></p>
   <p>Marks of Student 2 : <span ng-bind="marks[1]"></span></p>
   <p>Marks of Student 3 : <span ng-bind="marks[2]"></span></p>
   <p>Marks of Student 4 : <span ng-bind="marks[3]"></span></p>
   <p>Marks of Student 5 : <span ng-bind="marks[4]"></span></p>
</div>
</body>
</html>

Output :

Marks of student 1 : 70
Marks of student 2 : 75
Marks of student 3 : 80
Marks of student 4 : 85
Marks of student 5 : 90

Mistakes

While using the AngularJS expressions, some of the novice users may commit some mistake which causes AngularJS to stop working.

  1. Some times novice user may forgot to include the angularjs library file in the webpage.
  2. Some times ng-app directive is missing so browser does not recognise which section is programmed using AngularJS.
  3. Any of the syntax error in the script such as invalid variable name,wrong expression may stop working of complete AngularJS script.