AngularJS Data-Binding

By
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.

<!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>

Output:

Finally, you created a Hello world page!

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:

<!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>

Output:

Your Name is  My name is

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>
Output:
First name  Last name  My Full Name is

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>
Enter your age is  Your age is
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>

Output:

Enter your age is  Your age is
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.

<!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>

Output:

Enter your name  Your name is Default Name
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.

No comments:

Post a Comment