Data Binding in Angular JS

In Angular JS, one thing which makes it the easiest javascript framework to work with, is 2 way data binding.
So here is a simple example of how Data binding works, this post should be seen from the prism of a developer who has never much worked on front end development and just started to work on JavaScript.
Now-a-days ExtJS is a preferred choice to work on front end development, this seems to be a good replacement for frameworks like Adobe flex and GWT, as it provides good number of widgets for grids and graphs.
If we work with such frameworks you need to navigate through DOM and get to the point of interest to get value and then pass to javascript then process it as required. This is done away with in Angular JS, you update data(model) on the view and automatically the model in the controller reflects this change. This is achieved using the Observer pattern, listeners listen on this attribute in a loop and when they detect a change in value they call a function to replace the old value with the new one.
So below is the code showing the same in the view or the html file.
  1. <!Doctype html>
  2. <head>
  3. <script src="../bower_components/angular/angular.js"></script>
  4. <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  5. <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  6. <script src="DataController.js"></script>
  7. <script src="ChildController.js"></script>
  8. <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
  10. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  11. <link rel="stylesheet" href="../css/app.css">
  12. </head>
  13. <body ng-app="mainApp" ng-controller="IndexController">
  14. <div class="container">
  15. <div class="row" >
  16. <div class="col-xs-6 col-md-4 "><h3>Angular JS Lesson 1</h3>
  17. <ol>
  18. <h3><li>
  19. <a href="https://docs.angularjs.org/guide/databinding">Data Binding in Angular</a></li></h3>
  20. <h3><li>Models are “the single source of truth”.</li></h3>
  21. <h3><li>When model changes listeners are fired to replace the old value with the new value, aka Observer pattern.</li></h3>
  22. <h3><li>Check out $digest, $apply and $watch to understand how listeners, digester(dirty checking) and Updating ($apply) makes 2 way databinding works.</li></h3>
  23. </ol>
  24. </div><br/><br/>
  26. <div class="col-xs-6 col-md-4"></div>
  27. <div class="col-xs-6 col-md-4 barc">
  28. <h3 class="success">Data Binding Fundamentals</h3>
  29. <input type="text" class="form-control" data-ng-model="name" placeholder="Please Enter Your Name" />
  30. <h3 ng-if="name"> Welcome to Angular,{{ name }} you look like a {{animal}}</h3>
  31. <label>Main Controller</label>
  32. <h3 >Favorite Animal:</h3>
  33. <input type="text" class="form-control" data-ng-model="a.firstName" />
  35. <h3>{{ a.firstName }}</h3>
  37. <div data-ng-controller="ChildController">
  38. <label>Child Controller</label>
  39. <h3 >Favorite Animal:</h3>
  40. <input type="text" class="form-control" data-ng-model="a.firstName" />
  41. <h3>{{ a.firstName }}</h3>
  42. </div>
  44. </div>
  47. </div>
  50. </div>
  51. </body>
  52. </html>
The lines of interest to understand simple data binding are,
  1. <input type="text" class="form-control" data-ng-model="name" placeholder="Please Enter Your Name" />
  2. <h3 ng-if="name"> Welcome to Angular,{{ name }} you look like a {{animal}}</h3>
So model “name” is bounded to the input text and as you type in the text box its updated and displayed below real-time.
Similarly, if we define a controller ( remember the @controller of Spring but on the client side which has access to this data) and attach this model to $scope variable in the controller changes are reflected and updated on both the ends. Below is the controller,
  1. var app = angular.module("mainApp",[]);
  3. app.controller( "IndexController", function ( $scope ) {
  4. $scope.animal = "Snow Leopard";
  5. $scope.firstName = "Wolf";
  6. });
If the variable $scope.animal is updated in this controller or the view changes are reflected at both the places.
There is a catch here, if you have embedded controllers ( remember parent-child relationship in Java)  i.e. if we use a <div> controlled by One controller and a <div> inside parent <div> controlled by another controller. Even if we use same $scope variable in both the controller the updates are not synchronized between them.
We need to use a dot operator on the model name, this makes both the parent and child controller’s model to be in sync. Below is the child controller code.
  1. var app = angular.module("mainApp");
  3. app.controller( "ChildController", function ( $scope ) {
  4. $scope.firstName = "Lion";
  5. });
We you do not want the model from the parent and child controllers to be in sync just remove the dot(.) operator from the model name.
Css code for the some beautification of the view, i like to make the view look good as it helps me learn some CSS.
  1. h3 {
  2. color: #B4886B;
  3. font-weight: bold;
  4. display: block;
  5. width: 400px;
  6. float: left;
  7. font-family: 'Montserrat', sans-serif;
  8. }
  10. .barc {
  11. border-radius: 15px;
  12. color: navy;
  13. background-color: #D8CEF6;
  14. border: 2px solid #D8CEF6;
  15. padding: 5px;
  16. }
  19. label {
  20. color: #1491BA;
  21. font-weight: bold;
  22. display: block;
  23. width: 400px;
  24. float: left;
  25. font-family: 'Montserrat', sans-serif;
  26. }
The application looks like below:
DataBinding in Angular JS
DataBinding in Angular JS

Thats it, to learn and get in details check out $watch, $apply and $digest.

Comments

Post a Comment

Popular posts from this blog

Java Interview : Threads

Java came up with multi threading long time back, still the kind of response it invokes when this topic raises its head during interviews is not very encouraging. If you have attended an java interview, a couple of suppose to be very smart guys also know as lead developers will shower you with questions on multi threading, grilling you down to make sure what you are talking about, even asking you to write fork-join snippets to solve hadoop use cases. But if you are hired and you write a piece code using executor framework, you will be seen with suspicion generally reserved for people with casual shoes at cocktail parties. So here is post to start out thinking about threads. So a path of execution in java is known as a thread, appropriately an instance of Thread class. The main method runs in its own thread and starts up the program execution. If you implement the Runnable interface, you can run in a thread of you own. The Runnable interface has a run() method you implement your...
Read more

Spring Framework Interview Notes : Part Two Wiring

Image
The Spring container is the guy responsible to get the train moving when working with the Spring framework.  The dependency magic gets the things working by somehow getting all the stuff up and running. Now somehow we need to indicate to the spring container as to where and how to “wire” these beans. Remember these beans are also known as components. Components combine to form the structure and thus make the functionality. The concept of component scanning or component finding comes into the picture, literally searching the applications to find the beans required to create these beans. @ComponentScan is the annotation used by giving the the base packages where these components are defined using annotation or xml . Spring Framework Interview Wiring You can also use Autowiring with its attributes, which finds the beans by-name or by-type and injects them appropriately. @Component, @ComponentScan, @Autowired, @Named,  @Bean  with requires and quali...
Read more

Card Dealer In Java in Less than 5 minutes

Image
Code: package design; import java.util.Collections; import java.util.Stack; public class CardDealer { private int totalPlayers; private static Stack<Card> deck; CardDealer(int players){ totalPlayers=players; deck =  Deck.getCardDeck(); } public static void main(String[] args) { CardDealer cardDealer = new CardDealer(5); cardDealer.dealCards(); } public void dealCards(){ int cardsToPlayer = deck.size()/totalPlayers; for(int i=0;i<cardsToPlayer;i++){ for(int j=1;j<=totalPlayers;j++){ System.out.println("Player:"+j+ " gets "+deck.pop()); } } } private int getPlayers() { return totalPlayers; } }  class Deck{ static Stack<Card> deck = new Stack<Card>(); static Deck d=null; static { d = new Deck(); } public static Stack<Card> getCardDeck(){ return deck; } private Deck(){ populateDeckWithcards(); shuffle(); } pr...
Read more