Note: To understand this post please read our AngularJS Tutorial 1
In our previous tutorial we saw how to get data from model. We have written code in our javascript file. But what if we could have all this work done 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 way of programming is called data binding.
In this tutorial i am using the same example as in previous tutorial and just making it dynamic. In the previous example the HelloController sets the model Message.text once and it never changes. To make it live, lets change the previous example by adding a textbox. Using that textbox we can change the value of Message.text when the user types sometihng in the textbox.
<html ng-app>
<head runat="server">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<input ng-model='name' />
<p> Hai, {{name}} World!! </p>
</div>
</body>
</html>
<head runat="server">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<input ng-model='name' />
<p> Hai, {{name}} World!! </p>
</div>
</body>
</html>
Now run this code and type some name in textbox, you can see the text changes accordingly. In this way we can dynamically update the view using AngularJS's DataBinding.
No comments:
Post a Comment