Data binding is the process of synchronizing or linking of model data with view data.
In two way data binding any change in the model data will be reflected automatically in view data and any change in the view data will be reflected in model data.
AngularJS library provides this two way data binding mechanism.
In AngularJS web applications, data binding can be easily achieved using the directives ngBind and ngModel.
In this article, we will develop a simple AngularJS application that demonstrates how use ngBind and ngModel directives for data binding.
In order to develop this application, please follow the given below steps.
1. Create a directory structure as shown below
2. Download the latest version of AngularJS library
3. Copy the downloaded AngularJS library file to databinding/lib/angular
4. Create an html page with ngBind and ngModel directives
5. Open the page in a web browser
The text typed in the textbox will be displayed instantaneously in the web page.
6. Live Demo
The live demo of this application is available here
7. Download
You can download the application with complete directory structure from here
In two way data binding any change in the model data will be reflected automatically in view data and any change in the view data will be reflected in model data.
AngularJS library provides this two way data binding mechanism.
In AngularJS web applications, data binding can be easily achieved using the directives ngBind and ngModel.
In this article, we will develop a simple AngularJS application that demonstrates how use ngBind and ngModel directives for data binding.
In order to develop this application, please follow the given below steps.
1. Create a directory structure as shown below
 |
| Directory Structure |
2. Download the latest version of AngularJS library
 |
| Download latest version of AngularJS library file ( angular.min.js ) |
3. Copy the downloaded AngularJS library file to databinding/lib/angular
4. Create an html page with ngBind and ngModel directives
databinding/index.html
<html ng-app>
<head>
<script src="lib/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="remarks" />
<span ng-bind="remarks"></span>
</body>
</html>
5. Open the page in a web browser
The text typed in the textbox will be displayed instantaneously in the web page.
 |
| Screenshot of the page index.html in a web browser |
6. Live Demo
The live demo of this application is available here
7. Download
You can download the application with complete directory structure from here
Angularjs is the great javascript framework that has some compelling features not for developers but also for the designers. Angularjs is very essential for the web developers to know about its importance.
ReplyDeleteAngularjs Training in Chennai | angularjs course in chennai