C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

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.

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.

Model View Controller (MVC)

The idea behind MVC is that you have clear separation between managing its data model, the application logic (controller, and the UserInterface(view).

The view gets data from the model . When a user interacts with the
application by clicking or typing, the controller responds by changing data in the model.
And finally, the model notifies the view that a change has occurred so that it can update it's view.
In Angular applications, the view is the Document Object Model(DOM), the controllers
are JavaScript classes, and the model data is stored in object properties

Now we will look at a basic Hello World program using AngularJS.

<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>
<script type="text/javascript">
function HelloController($scope) {
$scope.Message = {text: 'Hello'};
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p> {{Message.text}} World!! </p>
</div>
</body>
</html>

The first script tag is to add AngularJS to our HTML page. In second script tag i have written the function HelloController in which a object "Message" is created.

When you run the above code, The browser displays Hello World !! as output.

Read our Next Tutorial : DataBinding in AngularJS