Everything about AngularJS Two-way Data Binding
12:20:00 PM
There is a lot of talk going on about AngularJS these days.Everyone used it says, It is an awesome framework.Any thoughts from you guys? Well, obviously it should have characteristics that other frameworks does not match and yes of course it surely does.
Among so many good things that Angular offers, there is one thing that stand out."How AngularJS handle Data Binding ?" Architecture behind AngularJS Data Binding mechanism is really fascinating. Commonly known as Two-Way binding among developers and it allows you to do so much more with less coding and take care lot of headache underlying work for you.
So I thought it is a good time to take a very good look at what really going on inside Angular and in this article I am going to discuss in and out details on AngularJS Two-Way Data Binding mechanism.
Above you can see a classic example of two-way binding in AngularJS. As you can see when ever We change our inputs it will automatically affect to the "Customer Information" panel too.What most exiting is "No additional Java Scripts or coding" necessary for do that.
 |
| Source : AngularJS Docs-Data Binding |
Before Jumping to Data binding in AngularJS or explaining the code we'll take a peek at some important element in AngularJS architecture.
What Is Controller ?
Controller is the interaction between model and view.It controls the data of angular Application.
What Is Model ?
Model is the lowest level of pattern responsible for maintain Data.It is responsible for maintaining the application data.
Take a another look at our "CustomerController" again,It will create a model of Customer.
What Is Scope ?
Scope is the an object that refers to the application model.It provide the glue between application controller and the view.Scope allows the directives to be notified of property changes,Which allows the directives to render the updated value to the DOM.
This is your index.html file or your application view. As you can see we can use ng-bind or "{{ }}" to get model's data to view from controller. On the other hand all the input DOM property changes are report back to the controller too.Hence As soon as you change the value of a input it will affect to the model too.
If we take above program as an example, Initially Customer Information Panel and inputs have the values we assign to the model inside our "CustomerController".But as soon as we change the values of the input fields it will affect to the model,So the information inside Customer Information Panel will update too.
Folks this What we call Two-way Data Binding mechanism in AngularJS. We did not use one single additional line of code. All the data handling and communication between Model and View done by Angular it self.
That is the beauty which comes with Angular.Hope you enjoy the article and get something out of it.
.png)
0 comments