AngularJS 360: Basic Databinding (Part 1)

This is the first part of a series of blog posts on understanding AngularJS. The series will focus on key concepts and get you building great Javascript powered applications. In this tutorial, however the Javascript will be minimal! In fact I promise to keep the Javascript to zero lines of code, even while building a Fahrenheit to Celsius temperature converter. I wish to illustrate that AngularJS removes the need to directly write Javascript when you need to monitor events and update the DOM.

Databinding is a technique used to update a view (any HTML element) when a model (data) changes. AngularJS implements 2-way databinding which means that when the view changes (e.g. an input field), the model is updated as well. We will use databinding to build a Fahrenheit to Celsius temperature converter.

Step 1:
Design the HTML and CSS for the Fahrenheit to Celsius temperature converter. We just need a input field for the user to enter the temperature in Fahrenheit and a placeholder to display the Celsius temperature. A button will not be required as we will get AngularJS to automatically calculate the temperature each time the input field is changed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS 360: Basic Databinding (Part 1)</title>
  </head>
  <body>
    <h1>AngularJS 360: Basic Databinding (Part 1)</h1>
    <p>A basic Fahrenheit to Celsius temperature converter.</p>
  
    <form name="tempCalc">
        Fahrenheit: <input type="text"/>   
        <br/>
        Celcius: temp placeholder
    </form>
  </body>
</html>

Step 2:
Next we will enable AngularJS magic in the file by using a script tag to include the angular.js javascript file either locally or from the Google CDN at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js.
You will also need to add ng-app to the html tag.

<!DOCTYPE html>
<html ng-app>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS 360: Basic Databinding (Part 1)</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
  </head>

  <body>
    <h1>AngularJS 360: Basic Databinding (Part 1)</h1>
    <p>A basic Fahrenheit to Celsius temperature converter.</p>
  
    <form name="tempCalc">
        Fahrenheit: <input type="text"/>   
        <br/>
        Celcius: temp placeholder
    </form>
  
  </body>

</html>

Step 3:
Now for databinding magic. In AngularJS, any input field can be used as a model. All you need to do is add ng-model to the tag and give the model variable a name. The value of the model variable can then be displayed (in the view) using the {{}} syntax.

    <h1>AngularJS 360: Basic Databinding (Part 1)</h1>
    <p>A basic Fahrenheit to Celsius temperature converter.</p>
  
    <div>
    <form name="tempCalc">
        Fahrenheit: <input type="text" ng-model="fahrenheit_temp"/>   
        <br/>
        Celcius: {{fahrenheit_temp}}
    </form>
    </div>

Step 4:
You can now test the code. It won’t do the conversion but when you type in a Fahrenheit temperature converter, the value should be displayed below. Immediately! Yes as you type! AngularJS is doing all the mundane stuff like checking for a change to the field and then updating the dom with a new value.

Step 5:
AngularJS allows calculations to be performed with {{}}. This means we can just type in the equation {{(fahrenheit_temp – 32) * 5/9}} and we’ll have a working temperature converter.

The final code is below:

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS 360: Basic Databinding (Part 1)</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
  </head>

  <body>
    <h1>360 with AngularJS: Basic Databinding (Part 1)</h1>
    <p>A basic Fahrenheit to Celsius temperature converter.</p>
    <div>
    <form name="tempCalc">
        Fahrenheit: <input type="text" ng-model="fahrenheit_temp"/>   
        <br/>
        Celcius: {{(fahrenheit_temp - 32) * 5/9}}
    </form>
    </div>
  </body>

</html>

Step 6:
Have a play with the code in Plunker.

Step 7:
Review the code of another simple databinding example that uses sliders to mix RGB colors.

2 thoughts on “AngularJS 360: Basic Databinding (Part 1)

  1. Nice intro! Could you show an example where the value in Celsius is calculated inside a $scope.fahrenheitToCelsius() method? I have been struggling with a case when the data I’d like to bind cannot be expressed as a simple {{ expression }}, but has to be calculated in a function over an object graph.

    Also doing a contenteditable two-way (edit either fahrenheit or celsius value to modify the other) example would be nice, if you are planning on more in-depth series :)

  2. Pingback: AngularJS Highlights: Week Ending 7 July 2013 | SyntaxSpectrum

Leave a Reply