Welcome to the AngularJS series. Before proceeding with this article, I recommend you visit and study the following previous parts:

AngularJS allows the following two different ways to bind data to HTML.

  1. By using ng-bind directive.
  2. By using expressions.

We have already gone through directives in previous articles in which we discussed the ng-bind directive. Dealing with expressions is the purpose of this article.

AngularJS Expressions

Expressions are used to bind the data to HTML (a view) and also decides the position of that data, how and where it should be displayed in the view. AngularJS expressions are defined inside the the double curly braces, for example {{expression here}}.

Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}. For example:

Angulars Expressions vs JavaScript Expressions

Let's go through a simple example. We will first see how to bind data using the ng-bind directive then we will move to the main agenda of this article, AngularJS expressions.

Without using Expression/Using ng-bind

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Using ng-bind Directive</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="" ng-init="firstName='iShriss';lastName='Sharma'">
  9. <h1>Without using expression</h1>
  10. Fullname : <span ng-bind="firstName +' ' + lastName "></span> //ng-bind using
  11. </div>
  12. </body>
  13. </html>
Browser View



For the same piece of the preceding code, we can bind the data by replacing ng-bind by {{expression}}. Here is how it is.

Using Expression
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Using Expression</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="" ng-init="firstName='iShriss';lastName='Sharma'">
  9. <h1>using expression</h1>
  10. Fullname : {{firstName+' '+lastName}} //expression
  11. </div>
  12. </body>
  13. </html>
Output Window



The preceding example showed the use of a string inside an expression, just like:

{{Name + " " + email}} (string)

Using Filter in Expression
  1. <div ng-app="" ng-init="firstName='ishriss';lastName='sharma'">
  2. <h1>using expression|uppercase</h1>
  3. Fullname : {{firstName+' '+lastName|uppercase}} <!--//using filter uppercase-->
  4. </div>
Output Window

Similarly we can apply various types of filters depending on our needs.

Binding and Displaying AngularJS Number

As explained about JavaScript expression and AngularJS expressions earlier, we can use numbers inside AngularJS expressions that are just like JavaScript numbers in which we can filter using a pipe '|' character.

Let's see an example..

  1. <h1>Number|currency</h1>
  2. <div ng-app="" ng-init="items=2;price=100">
  3. <p>Total Price: {{ items * price|currency }}</p>
  4. </div>
Output Window



Binding and Displaying AngularJS Objects

We can also use AngularJS objects just like we did with JavaScript objects.These objects are used inside an expression.

Let's see an example.
  1. <div ng-app="" ng-init="employee={name:'Sam',department:'IT'}">
  2. <p>{{ employee.name }} belongs to {{employee.department}}</p> <!--objects in expression-->
  3. </div>
Output Window



Working with Arrays in Angularjs

AngularJS arrays behave just like we studied in JavaScript. Let's understand with a simple demo example.
  1. <div ng-app="" ng-init="prime=[2,3,5,7,11,13]">
  2. <p>Fourth primevalue is: {{ prime[4] }}</p> <!--AJS array-->
  3. </div>
Output Window

Summary

So developers, we learned the basics of AngularJS expressions. Much more on AngularJS is yet to be learned, we will cover them one by one. Stay tuned to this series of AngularJS.

Happy Coding!