Blog
A New Angle on Web Development
By Martin Schaeferle | August 15, 2014
There is a relatively new open source JavaScript framework that is currently taking the web development community by storm. I'm speaking of AngularJS, which Black Duck's Open Hub Web site (formerly Ohloh) currently has listed as one of the most active open source projects. Although it started at the top of 2010, it has really been in the last couple years that it has grown to rock star status and has become a go-to framework for many web developers.
So what's so powerful about AngularJS? The power is in how it easily binds data to the objects on a Web page. It is essentially an MVC framework that can efficiently create dynamic views in a Web browser. AngularJS is built to perform all those complex, low-level DOM manipulation commands so you don't have to. But doesn't jQuery do that? Sure, but AngularJS is jQuery to the next level, and can be used in tandum with jQuery or as a complete replacement. AngularJS also provides built-in AJAX support and, unlike jQuery, RESTful services support.
AngularJS also has the unfair advantage of being heavily supported by Google with many Google developers actively working to improve the framework. That has led to a huge community that is actively engaged with the open source project on GitHub. So with or without Google, it is destined to stay on top as one of the best frameworks to use-so use it with confidence.
Ok, so what does AngularJS look like? Let's look at a simple example of data binding using AngularJS. We will take a look at a Web page to do Fahrenheit to Celsius converting. The first step is we need to reference the Angular JavaScript file in the <head> tag. That is shown here:
Next add the following HTML code to the body:
Temperature Fahrenheit: Celsius: {{(fTemp - 32) * 5 / 9}} What's going on here? In the first DIV tag we provide scope for the block of HTML that will leverage AngularJS by including the "ng-app" attribute. AngularJS chose the ng namespace for the fact that when you phonetically say "NG" you say "aye-n-g" which is about as close to "angle" that you can get with two letters. Ok, moving on. We then see an attribute "ng-init" that is used to initialize a variable "fTemp."
This sets the variable to 32. It is then used in the <input> tag to bind that textbox value to the variable fTemp. This variable is then used in the calculation of Celsius. Next you come across the double curly braces, "{{ }}", which AngularJS picks up and evaluates what is between them. In this case, we calculated what the equivalent Celsius value is based on the current setting of Fahrenheit. Below is what the page looks like:
And if I change the value of Fahrenheit, the Celsius instantly changes as well, as shown here:
Although this is a simple AngularJS example, I hope you can see the power behind it. It wouldn't take much additional code to bind this Web page to a RESTful service that returns the current temperature in your area. And it's not just weather data - you could hook up dynamic pages to your company's data and manipulate it easily on the fly without getting buried in all the DOM-related calls or dealing with all the nuances of different browsers.
Check out our AngularJS courses for yourself and see John Culviner break down AngularJS so you can leverage the power in your Web sites.
