Data Binding
Before AJAX single-page apps were common, platforms like Rails, PHP, or JSP helped
us create the user interface (UI) by merging strings of HTML with data before sending
it to the users to display it.
Libraries like jQuery extended this model to the client and let us follow a similar style,
but with the ability to update, part of the DOM separately, rather than updating the
whole page. Here, we merge template HTML strings with data, then insert the result
where we want it in the DOM by setting innerHtml on a placeholder element.
This all works pretty well, but when you want to insert fresher data into the UI, or change
the data based on user input, you need to do quite a bit of non-trivial work to make sure
you get the data into the correct state, both in the UI and in JavaScript properties.
But what if we could have all this work done for us without writing code? What if we
could just declare which parts of the UI map to which JavaScript properties and have
them sync automatically? This style of programming is called data binding. We included
it in Angular because it works great with MVC to eliminate code when writing your
view and model. Most of the work in moving data from one to the other just happens
automatically.
To see this in action, let’s take the first example and make it dynamic. As is, the Hello
Controller sets the model greeting.text once and it never changes from then on. To
make it live, let’s change the example by adding a text input that can change the value
of greeting.text as the user types.Here’s the new template:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
The controller, HelloController, can stay exactly the same.
Loading it in a browser, we’d see the screen captured
________________
|Hello |
------------------------
Hello, World
If we replace Hello with Hi in the input field, we’d see the screen captured
________________
|Hi |
------------------------
Hi, World
Without ever registering a change listener on the input field, we have a UI that will
dynamically update. The same would be true for changes coming to and from the server.
In our controller, we could make a request to our server, get the response, and set
$scope.greeting.text to equal what it returns. Angular would automatically update
both the input and the text in the curly braces to that value.
No comments:
Post a Comment