JavaScript Data Binding with AngularJS Part I – Getting Started
Related Posts:
In a previous post I talked about where I see things moving when it comes to the world of client-side JavaScript development. Although a lot of applications are still being built using control-oriented programming with JavaScript frameworks like jQuery, I think that the the development landscape is gradually embracing a more data-oriented programming approach and starting to take advantage of data binding frameworks that make it easier to build and maintain CRUD applications.
In this post I’m going to introduce one of the JavaScript data binding frameworks that can be used for data-oriented programming called AngularJS and show how it can be used. I’ve been experimenting with AngularJS a lot lately and like what I’ve seen up to this point. I’ll follow this post up with additional posts that drill-down into the framework more and provide details on pros and cons I’ve found. If you’re interested in seeing alternative data binding frameworks check out my earlier post.
Getting Started with AngularJS
So what is AngularJS and why is it worth taking a closer look? To answer that question take a moment to think about the features provided by HTML. It’s no secret that it wasn’t designed with dynamic applications in mind – it’s a static markup language after all. With raw HTML you can’t perform looping operations that create new elements, filter UI elements as other elements change, or perform a variety of other tasks that dynamic Web applications require. When compared to Flex, Silverlight, WPF, and other UI frameworks it’s quite limiting. We work around the limitations by generating HTML dynamically on the server or by using JavaScript frameworks like jQuery to manipulate the DOM on the client-side.
AngularJS extends HTML to support dynamic applications which means it’s well suited for CRUD-centric types of applications. For example, it allows <option> tags in a <select> to be dynamically generated without having to write custom JavaScript code to perform that task, tracks changes made to UI elements and the data they’re bound to, provides filtering/sorting support, and much more. The AngularJS documentation (http://docs.angularjs.org/guide/overview) words it this way:
“Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives.”
AngularJS frees you from having to do the following:
- Register callbacks
- Manipulate the DOM programmatically
- Move data in and out of the UI manually with code
- Writing a bunch of initialization code just to get started
Here’s a list of features that it provides out of the box.
- Data binding
- Data filtering/sorting
- Data templates
- Ajax support
- Form validation
- Routing
- History support
- Deep linking
- Modular and reusable components
- Loosely coupled architecture (dependency injection)
- MVC-style applications
- Architected with unit testing in mind
You can see that AngularJS is much more than a simple data binding framework – it’s more of a client-side JavaScript application framework. If you don’t like a particular feature that AngularJS provides you can inject custom code using the dependency injection functionality that’s provided. I won’t cover that topic here but you can find additional details about it and many other topics in the AngularJS docs.
To help get you started with AngularJS I’ve put together a “Hello World” type tutorial that I plan to follow-up with additional posts in the future. Let’s jump in and take a look at the basics.
Step 1: Get the Script
To get started using AngularJS you’ll need to grab the script from http://www.angularjs.org (or from their github site) and include it in your page.
<!DOCTYPE html> <html> <head> <script src="js/libs/angular-[version].js"></script> </head> <body> ...
</body> </html>
Step 2: Add the ng-app Directive
Next, you’ll need to add an AngularJS directive named ng-app into the page that defines your application root. You can put ng-app on the <html> tag or on a tag somewhere else in the document (such as a <div>) if only a portion of a page needs AngularJS functionality. AngularJS initializes when the DOMContentLoaded event fires and then looks for the ng-app directive.
Here’s an example of defining the ng-app directive on the <html> element. This example doesn’t assign a value to the directive but in a future post I’ll show how ng-app can be used to define custom application modules that provide additional functionality such as routing, REST calls, and more.
<!DOCTYPE html> <html ng-app> <head> <script src="js/libs/angular-[version].js"></script> </head> <body>
... </body>
</html>
Alternatively, you can define the application root programmatically if you’d prefer to go with a more jQuery-style approach:
<!DOCTYPE html> <html> <head> <script src="js/libs/angular-[version].js"></script>
<script> angular.element(document).ready(function () { angular.bootstrap(document); }); </script> </head>
<body>
...
</body> </html>
Note that jQuery can be used with AngularJS but it isn’t required.
Step 3: Add a Control with an ng-model Directive
Once the ng-app directive is added you can start using AngularJS’s data binding functionality. You can do simple data binding which I’ll show here or bind to objects that define properties and functions. To get started, add a control such as a textbox that has another AngularJS directive named ng-model on it. The ng-model directive defines the property of the model that you’ll bind to. In this example I don’t have a model object (I’ll show how to create one in a future post) and will bind the “name” property to text in the page.
Name: <input type="text" ng-model="name" />
To bind another part of the page to the value of the textbox simple “mustache” brackets ({{ and }} brackets) can be used. This is common with template frameworks like Mustache.js and others. An example of binding to the ng-model value defined on the textbox is shown next:
Welcome to AngularJS {{name}}
And that’s it! You’ve just performed your first AngularJS data binding operation. As the textbox value changes the {{name}} binding will automatically change as well. Try it out in the following live example (you’ll need to click on the “Result” tab below to run it):
Conclusion
I’ve barely scratched the surface when it comes to building data-oriented applications with AngularJS – the goal with this post is to provide a rudimentary sample. In the next post I’ll show how AngularJS can be used to bind to model object properties and perform two-way data binding.