When we should avoid using Angularjs Two way binding and why?
I have split this blog into 5 parts.
- AngularJS Watcher ($watch).
- AngularJS Digest cycle($digest).
- One Way Binding.
- Two Way Binding.
- Conclusion.
1. AngularJS Watcher ($watch)
Watcher: $watch is a function defined by Angular framework which takes two arguments
- Variable.(A value function)
- Callback function.
If there is any change on the variable, callback function gets called.
2. AngularJS Digest cycle($digest).
Digest cycle: When we create a data binding to a variable on the $scope object, AngularJS creates a $watch internally for each variable which we create in the $scope object. These watchers watch the changes of the $scope object and if there is any change in a variable associated with $scope object Angular internally calls that $watch which was created for that particular variable. Due to these changes $scope.$digest() gets called. When it gets called angular iterates on $scope object and its children for updating the changes. Which may cause performance issues.
3. One Way Binding
One Way data binding in Angularjs is the way to transfer a data from either model to view, or from view to model. For understanding how the data exactly gets transferred you can refer to the Angularjs Digest cycle.
4. Two Way Binding.
Data binding in AngularJS is the synchronization between the model and the view.
Let’s look at this by example.
index.html
l>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"
data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="OuterCtrl">
<p>your input is being bind from model. Your Input is : {{name}}!</p>
<label>Your Input:
<input ng-model="name" type="text"/>
</label>
</body>
</html>
app.js
const app = angular.module('myApp', []);
app.controller('OuterCtrl', $scope => {
$scope.name = 'Please Write something here';
});
You can play above example on plnkr.
Why one way not two way?.Because when we use one way binding associated $watch gets called once. While in two way binding it gets called twice one for view change and one for model change.
So the question is , should we avoid two way binding?
5. Conclusion
I think it depends.
If performance is not your concern. If you can avoid too many method calls on $scope or child of $scope from html. If you are writing a small application or interacting with user input which does not update much of your $scope object.
Then you may not need to avoid it. :)
Because it saves a lot of time and effort. Otherwise, you need to write a lot of code to handle two way bindings.
In case you are playing with really huge data then we should try to avoid as much as possible. Because whenever we change anything in the $scope object or its child, associated with that $watch gets called and AngularJS updates the $scope object. So any changes on $scope or its child make $watch trigger, and $watch make $digest cycle run.Whenever $digest cycles run Angularjs framework update the DOM with the updated $scope object. Which means it is going to hit the performance really bad. Thus, the browser may crash, which nobody wants.
Some time people misunderstood the exact use of two way binding and for transferring data for one way only people use two way binding.So I think in those cases try to use one way binding wherever is possible.
I think due to the performance issue Google has removed the default two way data binding from Angular2.
We should avoid two way binding because it causes the performance issue.
I would love to hear your valuable feedback in the comment section, and also feel free to share on any other social platform.
Feel free to contact me direct.
Emails: sitaram@thoughtworks.com, yadavseetaram66@gmail.com
Social : Facebook , LinkedIn, Twitter, Github
Thank you to OMkar Mote Jayanta Kshirsagar for review.
Source: Google
Nicely written..