Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

March 7, 2014

AngularJS in Visual Studio: Data Binding

Filed under: AngularJS,Data Binding,Visual Studio @ 12:15 pm
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http':’https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);

This is a continuation of the World’s Simplest AngularJS Example in Visual Studio post. This post adds simple data binding to the example.

Most .NET developers understand data binding from Windows Forms, Web Forms, or XAML.

For example, in Windows Forms you can bind a LastNameTextbox control’s Text property to a LastName property of a Customer class (or LastName field in a data source). When the form displays, the Textbox is automatically populated. If the user changes the contents of the Textbox, the property (or field) is automatically updated.

image

Angular provides this same type of two-way data binding. It automatically synchronizes HTML elements with data properties.

The key to data binding with Angular is the ng-Model directive. The ng-Model directive binds HTML elements to a property. If no property exists, the property will be created implicitly. We’ll use that default functionality to perform data binding without any real properties for this simple example.

Let’s try some very simple data binding:

<!DOCTYPE html>
<html xmlns=”
http://www.w3.org/1999/xhtml”>
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <p>Customer Name: <input type=”text” 
                             ng-model=”customerName” /></p>
    <div>{{customerName}} Orders as of {{ “2014-01-31″}} </div>

    <script src=”Scripts/angular.js”></script>
</body>
</html>

  • The above code sets the ng-model directive as an attribute on the input tag.
  • The value of the ng-model directive is the name of the property to which this input tag is bound. In this case, the property is named “customerName”.
    • This binds the input tag to the defined property.
    • As the user types into the input box, the customerName property is automatically updated.
    • This property is not defined anywhere, so Angular creates it implicitly.
  • The div tag displays the value of the property by including it in double curly braces.
    • Double-curly braces define a “binding” and can contain any Angular expression.
    • In this case, the expression is just the property name.
    • So the value of the property will appear where the binding is defined.
  • As the user enters text into the input box, that text is immediately displayed in the div tag.

Run it, and you get:

image

Enter some text, and it appears as follows:

image

We’ll see lots more about binding once we connect to some data.

Enjoy!

PS circle


Check out my Pluralsight courses!

5 Comments

  1.   Carlos Alcantara — March 27, 2014 @ 9:00 am    Reply

    Me interesa el curso, por que debo tomar
    una decisiĆ³n para elegir una herramienta de desarrollo

  2.   DeborahK — March 27, 2014 @ 5:47 pm    Reply

    If you are interested in the Pluralsight courses, you can check them out here: http://www.pluralsight.com.

  3.   Alex I — April 2, 2014 @ 5:05 pm    Reply

    What’s the advantage over Knockout? Knockout seems to be simpler to implement and cleaner when it comes to binding.

  4.   Mohamed — April 4, 2014 @ 12:08 pm    Reply

    Very nice tutorials madam. Please keep posting them. I really understood the power and some of the technical jargons (like ngg) by just practicing your first couple of tutorials. When can we expect the rest of the series :)

  5.   Raul A De Jesus — April 5, 2014 @ 7:47 am    Reply

    Go here to learn more:

    http://angularjs.org

    http://knockoutjs.com

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs