i205 Understanding Data Binding in Ang uarJS BOTNET-TRICKS Coding iv rhyme Ready to master C#, .NET, MVC, JAVA, PHP, AngularJS, Hadoop, Android, iphone, Testing skills? Join our online/offline training programs and take your career to the next level! For more details call us +91-9871749695 or write us info@dotnet- tricks.com nup Understanding Data Binding in AngularJS Posted By : Shailendra Chauhan, 29 Dec 2014 Updated On : 29 Dec 2014 ® Total Views : 3,176 Keywords : data-binding in angularjs, two-way binding in angularjs, one-way binding in angularjs, issue with two-way binding A ngularJ$ data-binding is the most useful feature which saves you from writing boilerplate code (Le. the sections of code which is included in many places with little or no alteration). Now, developers are not responsible for manually manipulating the DOM elements and attributes to reflect model changes. AngularS provides two-way data-binding to handle the synchronization of data between model and view. How AngularJS handle data binding AngularJS handle data-binding mechanism with the help of three powerful functions: $watch0, $digest0 and $apply0. Most of the time AngularJS will call the $scope $watch0) and $scope.$digest0 functions for you, but in some cases you may have to call these functions yourself to update new values Two-way data binding It is used to synchronize the data between model and view. It means, any change in model will update the view and vice versa, ng-model directive is used for two-way data binding, ipsa dotnet rick. com/T orang darjs/PYGV201214-Understanding- Data Binding-in- Angular Hint wi205 Understanding Data Binding in Arg uardS Ua Change to View Change to Model updates Model updates View ‘Two-Way Data Binding Issue with two-way data binding In order to make data-binding possible, Angular uses $watch APIs to observe model changes on the scope. Angular registered watchers for each variable on scope to observe the change in its value. If the value, of variable on scope is changed then the view gets updated automatically This automatic change happens because of $digest cycle is triggered. Hence, Angular processes all registered watchers on the current scope and its children and checks for model changes and calls dedicated watch listeners until the model is stabilized and no more listeners are fired, Once the Sdigest loop finishes the execution, the browser re-renders the DOM and reflects the changes By default, every variable on a scope is observed by the angular. In this way, unnecessary variable are also observed by the angular that is time consuming and as a result page is becoming slow. Hence to avoid unnecessary observing of variables on scope object, angular introduced one-way data binding, One-way data binding This binding is introduced in Angular 1.3. An expression that starts with double colon (::), is considered a one-time expression ie, one-way binding. ipsa cote rick. con dovalongurs/PYGV201214- Understanding Dat Bnding-in-Ang aru Hinti205 Understanding Data Binding in Arg uardS ae One-Way Data Binding Two-Way and One-Way data binding Example o1 02 03 04 05 06 07. o8 09 10 re

Name (two-way binding): Your name (one-way binding) : {{::name}}
Your name (normal binding) : {{name}}

What do you think? Thope you will enjoy the AngularJS data binding while developing your app with AngularlS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this artide are always welcome, Share this article with your friends! share 62 tweet|(8] _ S+1 0 ipsa cote rick. con dovalongurs/PYGV201214- Understanding Dat Bnding-in-Ang aru Hinti205 Understanding Data Binding in Arg uardS Recommended Articles! 1. Understanding cookies in AngularJS 2. Bootstrapping angular app based on multiple modules 3. Understanding AngularJS Routing 4. Understanding $watch0, $watchgroup0 and $watchCollection) methods of scope Understanding AngularJS digest life-cyde Understanding $emit, $broadcast and $on in AngularJS 6. 7. Understanding scope inheritance in AngularJS 8. Understanding AngularJS scope life-cycle 9. Understanding Angular)S Bootstrap Process 10. Understanding jQLite or jQuery Lite Poel ac Les ecne! EE eee ees For more details call us +91-987 1749695 About the Author Hey! I'm Shailendra Chauhan full-time author, consultant & trainer. I have more than 6 years of hand over Microsoft .NET technologies and other web technologies. 1 am the founder & chief editor of www.dotnet-tricks.com and www.webgeekschool.com. I am author of books ASP.NET MVC Interview Questions and Answers & AngularJS Interview Questions and Answers & LINQ Interview Questions and Answers. I love to work with web applications and mobile apps using Microsoft technology including ipsa dotnet rick. com/T orang darjs/PYGV201214-Understanding- Data Binding-in- Angular Hintsuzos Understanding Data Beng in AnguarJS ASP.NET, MVC, C#, SQL Server, WCF, Web API, Entity Framework.Cloud Computing, Windows Azure, jQuery, jQuery Mobile, Knockouts, Angularjs and many more web technologies. More. Free Interview Books ASP.NET MVC Interview Book AngularJS Interview Book ipsa dotnet rick. com/T orang darjs/PYGV201214-Understanding- Data Binding-in- Angular Hinti205 Understanding Data Binding in Arg uardS Browse By Category Net Framework ¢ 7 ADO.NET¢ 6 Ajax4 2 Angular Material Design « 1 larIS 425 ASP.NET 415 ASP.NET A Backboned 1 C45 C#429 c ction ¢ 4 — Design Patterns ¢ 18 Windows Apps € 6 CSS-4 5 Dependency In Entity Framework 4 Fluent Nhibernate «1 Hybrid le Apps €. 1 Tonic ¢ 2 JavaScript ¢ 6 jQuery ¢ 4 jQuery Mobile ¢ 6 Knockout¢ 5 LINQ415 MVC 455 MVC6« Nhibernate ¢ 1 OOPS 4 PhoneGap « SQL Server «47 SQL Server 201241 TFS 3 Visual Studio ¢ 5 F410 WebAPI 4 7 Windows Azure ¢ 2 Windows Phone WPF ¢ 4 Learn In Hindi & @ Why learn in English if you are more comfortable in Hindi? Recent Articles Popular Articles = Nodejs development with Visual Studio = Understanding Internationalization in ASP.NET MVC = Enabling AngularJS IntelliSense in Visual Studio 2013 = Understanding ng-repeat special variables = Understanding ng-if, ng-switch and ng-repeat directives "Understanding $watch), $watchgroup() and $watchCollection() methods of scope = Understanding cookies in Angular!S = Understanding $emit, $broadcast and $on in AngularJS = Understanding AngularlS digest life-cycle = Understanding Angular scope life-cycle ipsa cote rick. con dovalongurs/PYGV201214- Understanding Dat Bnding-in-Ang aru Hinti205 Understanding Data Binding in Arg uardS Like us on Facebook Dot Net Tricks Like 10,310 people ke Dot Net Tricks. Facebook soca plugin DOT NET TRICKS TRAINING CENTER Sippy Mall B-64, Near SBI Bank, Noida Sec-2 Metro : Noida Sec-15 Walking distance) Phone: +91-9871749695, 9560344074 2 Dot Net Tricks is licensed under a Creative Commons Attribution 4.0 International License SUBSCRIBE & FOLLOW US Enter Your Email Address. “PROTECTED BY COI E DONOT COPY] DISCLAIMER! This is my personal blog and having articles on .net and others .net related technologies. The opinions expressed here are my own and not belongs to my employer or other organization. I have listed my own learning experience on this blog. Copyright © 2012-2015. The content is copyright to Shailendra Chauhan and may not be reproduced on other websites without permission from the owner. ipsa cote rick. con dovalongurs/PYGV201214- Understanding Dat Bnding-in-Ang aru Hint m7