Angular Data Binding

AngularJS Data-Binding

Let’s first create our angularjs Hello world Page:

You need to copy the below entire code block in one notepad file (OR HTML editor) and save it as “helloworld.html” and run in browser.

Hello-World Example

<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>Welcome in the Angular JS</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController" >
    <h2>{{title}}</h2> 
  </div>
<script> 
  var app = angular.module('sampleApplication', []); 
  app.controller('sampleController', function($scope) { 
     $scope.title = "Finally, you created a Hello world page!"; 
  }); 
</script>   
</body>
</html>

Try it » Download Example »

Output

What is Databinding?

This is the most powerful and useful feature among all the feature of angular js, It basically works as a bridge between model and views and auto synchronize data between model and view.

Data Binding in AngularJs is two ways: One is with Expression and another is with ngModel.

AngularJS two way binding example below:

Two-Way-Binding Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Your Name is <input type="text" ng-model="name" /> My name is {{name}}
    </div>
</body>
</html>

Try it » Download Example »

Output

ng-model is the inbuilt directive used to bind the value of HTML Control like textbox, textarea, checkbox etc to binding variable

Here ng-model="name" means we have defined name as angular variable with ng-model directive which will set the value of textbox to name variable and being displayed with {{name}} expression.

Two-Way-Binding-Expression-Concatenates Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        First name <input type="text" ng-model="firstName" />
        Last name <input type="text" ng-model="lastName" />
        My Full Name is {{firstName + ' ' + lastName}}
    </div>
</body>
</html>

Try it » Download Example »

Output

Once you start entering first name and last name in textboxes, it will start binding in the below statement. This is the power of AngularJS

In the above Example the expression {{firstName + ‘ ’ + lastName}} concatenates firstName and lastName with space in between Just like javascript expression.

What is Ng-bind?

This is used to bind application data to the html view page. we can also show application data in the html page with the help of angular expression like {{ expression }} as you read above. But its good if you bind data with ng-bind directive.

Here is a very simple example for both expression and ng-bind directive.

Two-Way-Binding-With-Expression Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Enter your age is <input type="number" ng-model="age" />
        Your age is {{age}}
    </div>
</body>
</html>

Try it » Download Example »

Output

Lets try this same example with the help of ng-bind.

Two-Way-Binding-With-Ng-Bind Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Enter your age is <input type="number" ng-model="age" />
        Your age is <span ng-bind="age"></span>
    </div>
</body>
</html>

Try it » Download Example »

Output

Problem with {{}} is, you might see that actual Your age is {{ age }} for a second before age is resolved (before the data is loaded in your browser), so you need to use ng-bind if that is an issue for you.

What is Ng-Init?

ng-init directive initialize the application variable value. Later on you can change this initial value by changing the value of variable which is bind to html view.

Ng-Init Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Enter your name <input type="text" ng-init="name='Default Name'" ng-model="name" />
        Your name is <span ng-bind="name"></span>
    </div>
</body>
</html>

Try it » Download Example »

Output

Initially the value of name variable is "Default Name" and if you fill your name in the input box the initial value overwrites with the value entered.

« Previous