Two-way data-binding
Two way data binding means automatic synchronization of data between the model and view components.
Whenever the model changes,angular will cause the view to automatically update leading to no explicit DOM (Document Object Model) manipulation and vice versa.
Two way binding example in AngularJS
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <div ng-app=""> Name: <input type="text" ng-model="name"> <p ng-bind="name"></p> </div>
Explanation
The above code when a model(ng-model) variable is bound to a HTML element(input tag) that can both change and display the value of the variable.By using ng-bind to display the model.
Traditional Approach
In traditional approach we need to read user input and merge with the template to display the view on the screen. Everything we need to do explicitly.
Example in Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#name").keypress(function(){
$("#textboxvalue").text($("#name").val());
});
});
</script>
<html>
<body>
Name: <input id="name" type="text">
<p id="textboxvalue"></p>
</body>
</html>
Explanation
In Javascript or Jquery we need to do the explicit data binding by using DOM events like change,keypress etc.
In the above example value typed in the Name textbox is updated in paragraph (textboxvalue) by using keypress jquery function.
| Previous Topic : Advantages and Disadvantages of AngularJS |
| Next Topic : Built in angularjs directives part1 |
Thanks for your blog!!! I would like to share with my friends and colleagues
ReplyDeleteRPA Training in Chennai
Spoken English Classes in Chennai
German Language Classes in Chennai
German Classes in Chennai
best german classes in chennai
ReplyDeleteThanks for sharing valuable information. Your blogs
is very helpful.
Angular JS Online training
Angular JS training in hyderabad
From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.
ReplyDeleteHave you checked all the App Ideas? How many app ideas excites you most? Which App Idea would you like to execute in 2022? We are at, The App Ideas offer a great consultation and perfect deal for Mobile Apps. Feel free to reach us.
very informative post, AngularJS Classes In Pune
ReplyDelete