AngularJS is an open source JavaScript web application framework built and maintained by Google. Unlike JQuery, which is a JavaScript library, it provides an entire framework in which to build an application and an easier way of manipulating the DOM. Two important benefits of AngularJS are the ability to implement using the MVW (model/view/whatever) pattern, similar to MVC (model/view/controller) and the two-way data binding. I will demonstrate these benefits in an example below.
AngularJS in Action
I have created a simple calculator application to demonstrate how simply an application can be created using Angular. AngularJS allows developers to easily bind inputs and outputs that affect the functionality and display of a page. By having the two-way data binding, the amount of code written can be reduced. My example uses ColdFusion, but Angular can be used with any programming language. In order to load Angular in your application all you need is the framework source which can be referenced with an HTML script tag as shown in line #5 of Figure 2 below.
The application I created calculates two numbers by asking for two number inputs, shown in Figure 1. After the user enters two numbers, he/she can select one of the radio buttons to indicate the type of operation to be performed. Once a radio button is selected, the calculation will be executed immediately and the results will be displayed to the user. The user can then select any of the operators to change the calculation on the fly and show the new results.
Figure 1
As Figure 2 shows, once you add the AngularJS application, you must use the directives (markers on an HMTL DOM element) available with Angular. For instance, in line #2, “ng-app” is the directive that allows you to use the AngularJS framework. Continuing on, “ng-controller” defines the controller that has the functions, shown in Figure 3. I decided to break this up into two files, index.cfm and calcNumbers.js. The index file includes the form that is displayed and calcNumbers is the controller that performs the calculation. You must define the controller file you want to use in the head tag along with the library, shown in line #6 of Figure 2. The directive “ng-model” binds the value of the first and second number input fields, and the operator value to be used in the function.
Figure 2
In Figure 3, you can see that I have declared and bound the three variables numOne, numTwo, and myOper so the application will have default values when it first runs. When the function is called, the $scope variable will reference the values in the bind input fields and will use those in the calculations. By using $scope, Angular will detect any changes and will modify the form via the calcNumbers controller. The final step in displaying your results is shown in line #22 of Figure 2. In order to display or output the values, the variables must be put in curly braces, such as {{numOne}}.
Figure 3
I found that AngularJS was easy to follow and fun to try out while creating this small one-page application. I believe AngularJS can be a powerful toolbox to use in applications. I haven’t had a chance to use Angular in a client application at Segue. However, I believe it will be great for a small interactive web site and/or mobile integration project.