AngularJS Tutorial Series – 3

This is a continued series of tutorials. Please refer to part -2 Here


Angular Expressions

syntax: {{expression}}
Expressions in Angular are used to bind data directly to HTML tags without using ng-bind anywhere in the code. The simple example to this would be-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title>Angular Expression Demo</title>
</head>
<body ng-app="">
<div>
My name is {{ 'John Doe' }}</div>
</body>
</html>

Output
My name is John Doe


Lets go for one step higher.

<div ng-init="name='John Doe'">
     My name is <b>{{ name }} </b></div>

Output
My name is John Doe

ng-init="name='John Doe'" is used to initialize a variable name and assign a value to it ng-init="name='John Doe'". Then we are just using the variable to bind with the DOM. Like this:
My name is {{ name }}


Expressions with Numbers

The following example is quite self explanatory

<div ng-app="">
        <input type="text" ng-init="salary=50000;pf=1000;LTA=2000" />
        <span>Total Salary:{{salary+pf+LTA}}</span></div>

Output
Total Salary: 53,000.00


Mathematical expressions can be resolved like above. The best part is Angular also supports formatting.

Formatting is also referred as Filters in Angular. Following is the same example of above with Currency Filter.

<div ng-app="">
        <input type="text" ng-init="salary=50000;pf=1000;LTA=2000" />
        <span>Total Salary:{{salary+pf+LTA | currency:"₹"}}</span></div>

Output
Total Salary: ₹ 53,000.00


More about filters in later tutorials for now let’s focus back on Expressions. 🙂

Strings with Expression:

The regular string operations are supported, like concatenation for example:

<div ng-app="" ng-init="firstName='Gaurang';lastName='Naik'">

The name is {{ firstName + " " + lastName }}</div>

Output:
The name is Gaurang Naik


The Expressions can also be used with JavaScript objects.

<div ng-app="" ng-init="employee={firstName:'Vishal',lastName:'Dhawan'}"> 
The name is {{ employee.firstName }}
</div>
Output:
The name is Vishal

With Arrays

<div ng-app="" ng-init="numbers[23,06,82,13,01,84]">
The number is {{ numbers[3]  }}
</div>
Output:
The number is 13

Note: {{Expression}} can be replaced with ng-bind attribute.

Example

<div ng-app="" ng-init="numbers[23,06,82,13,01,84]"> 
The number is <span ng-bind="numbers[3]"></span>
</div>
Output:

The number is 13


Conclusion
Angular supports dynamic way of quickly binding methodology using brackets. It can resolve the expression and return the exact result. They support literals, operators, and variables.

In next chapter we will focus on Angular Modules. Stay tuned!
Thank you.


GauranG

One thought on “AngularJS Tutorial Series – 3

  1. Pingback: AngularJS Tutorial Series – 4 | Gaurang's Tech Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s