• US Inquiries / 1 877 517 6540
  • Canadian Inquiries / 1 866 206 4644
submit to reddit

Sept 14, 2015 / KB-007

AngularJS Expressions

Check out these related webinars...

Unit Testing AngularJS Code
Get Ready for Angular 2.0
Introduction to AngularUI and UI-Bootstrap
Building AngularJS Apps with Grunt.js
Hybrid Mobile Development with AngularJS and Ionic
JavaScript for Web 2.0 Development
AngularJS

Lab 1 - AngularJS Expressions

You have already seen AngularJS expressions in previous labs. In this lab, you will learn a bit more about them. The newly acquired knowledge will equip you with the understanding of the power and limitations of AngularJS expressions.

Part 1 - Setting Up The Environment

  1. Copy the expressions.html file over to the C:\Software\nginx\html\labs directory.

  2. Open the Command Prompt window and unless you are already in the C:\Software\nginx directory, type in the following command at the prompt and press ENTER:

    cd C:\Software\nginx

  3. Start the nginx web server by executing the following command:

    start nginx

This command will launch the nginx web server that starts listening on port 80 ready to service your browser requests.

Keep the Command Prompt window open.

Part 2 - The Basics Expressions

  1. Open Google Chrome browser and navigate to http://localhost/labs/expressions.html

You should see the following content:

This page is a very basic calculator that allows you to add two numbers (operands) entered in the two input boxes. You can also do subtraction if you enter a negative number as the second operand.

The input boxes are HTML 5 number input controls that, among many other benefits, also perform automatic conversion of the input values into numbers which is an important consideration when working with dynamic type languages like JavaScript.

Whenever you supply valid numeric values and click the Add Up button, you should get the sum of the two operands as shown in a sample screenshot below with 100 and -10 entered as inputs.

Let's see how AngularJS performs the number manipulation.

  1. Open the C:\Software\nginx\html\labs\expressions.html file in your text editor.

You should see the following content (some parts of it are skipped for space):

(content skipped for space ...)  
<script>
   angular.module("SimpleApp", [])
      .controller("ThisController", function($scope) {
        $scope.add = function() {
            $scope.sum = $scope.op1 + $scope.op2;
         }
      });
</script>
</head>
<body ng-app='SimpleApp' ng-controller='ThisController' style="width: 400px">
   <input type="number" ng-model="op1">
   <input type="number" ng-model="op2">
   <!--
   <input type="text" ng-model="op1" size="3">
   <input type="text" ng-model="op2" size="3">
   -->
   <button ng-click="add()">Add Up</button>
   <div>The sum is: {{sum}}</div>
</body>
(content skipped for space ...)

The result of the summation in the add() controller method is assigned to the sum model parameter that is rendered on the page in the {{sum}} simple expression. Not very exciting - nothing to write home about, so to speak.

AngularJS expressions allow you to perform some mathematical operations in them.

Let's say we need to display not a simple sum of the inputs but rather a sum with a 10% value increase (like a principle + 10% interest amount of a loan).

AngularJS makes it easy to do.

  1. Locate and change the {{sum}} expression to {{sum + sum/10}}

  2. Save the file.

  3. Switch to Chrome and refresh the browser view by pressing Ctrl-R

  4. Enter 90 and 10 in the input boxes and click Add Up in the page.

The updated page should look as below.

The sum with a 10% increase is rendered correctly (the sum is 100 (90 + 10) and 100 + 100/10 is 110).

  1. Switch back to the text editor and revert the previous change from {{sum+sum/10}} back to {{sum}} to avoid confusion.

  2. Save the file.

Part 3 - Doing Simple Arithmetic

  1. In the file, locate and uncomment these lines:
<input type="text" ng-model="op1" size="3">
<input type="text" ng-model="op2" size="3">
  1. Then, comment out these lines:
<input type="number" ng-model="op1">
<input type="number" ng-model="op2">

After the updates, the code should look as follows:

. . .
<!--
<input type="number" ng-model="op1">
<input type="number" ng-model="op2">
-->
<input type="text" ng-model="op1" size="3">
<input type="text" ng-model="op2" size="3">
. . .
  1. Save the file.

  2. Switch to Chrome and refresh the browser view by pressing Ctrl-R.

  3. Enter 3 in the first input box and 7 in the second. Click Add Up.

The summation result on the page should look as below.

As you can see, AngularJS in this case, falls back on the JavaScript expression evaluator which treats both operands as string literals and simply concatenates them rather than performing a math addition. And this is one of the implicit benefits of using the HTML 5 number control instead of the regular text input boxes.

There are a number of ways to walk around this predicament, one of which is to divide each operand by 1 before addition, which we're going to implement in our code.

  1. Switch back to your text editor and locate the following line in the page:
$scope.sum = $scope.op1 + $scope.op2;
  1. Update it as follows:
$scope.sum = $scope.op1/1 + $scope.op2/1;

Doing so, we force JavaScript to treat the operands as numeric values.

  1. Save the file.

  2. Switch to Chrome and refresh the browser view by pressing Ctrl-R.

  3. Enter 3 in the first input box and 7 in the second. Click Add Up.

The summation result on the page should look as below.

Now our award-winning calculator works as expected.

But wait, there is more!

Part 4 - Combining Operations

There are situations, when you may want to combine AngularJS operations in one point.

Let's say we have a requirement to count the number of times we perform the summation (so that we can start charging our valued customers a premium price for using our calculator).

One way (which is the most obtrusive for our code) would be to create a new model attribute and increment it inside our add() function (controller method). While this would work, AngularJS offers a more elegant way of combining operations in one point. Here is how you do it.

  1. Switch back to your text editor and locate the following line in the page:
<button ng-click="add()">Add Up</button>
  1. Update it as follows:
<button ng-click="add(); cnt = cnt+1" ng-init="cnt=0">Add Up</button>

Here we are using multiple statements (separated by ';') in the value of the ng-click directive, where we inline the incrementing operation for the cnt model parameter, that we initialize to 0 in the ng-init directive.

  1. Locate the following line in the page:
</body>
  1. And right above it enter the following line to reflect the value of our cnt counter.
<div>Operation invoked {{cnt}} times</div>

After your updates, the code should look as follows:

    <input type="text" ng-model="op2" size="3">
    <button ng-click="add(); cnt = cnt+1" ng-init="cnt=0">Add Up</button>    
    <div>The sum is: {{sum}}</div>
    <div>Operation invoked {{cnt}} times</div>
  1. Save and close the file.

  2. Switch to Chrome and refresh the browser view by pressing Ctrl-R

You should see the following page content:

  1. Perform some number additions and observe the incrementing value of the operation invocation counter.

We are almost done in this lab.

Part 5 - Cleaning Up

  1. Close Chrome browser.

  2. In the Command Prompt window where you started the nginx web server, enter in the following command:

    nginx -s stop

This command will stop the web server.

You can keep the Command Prompt window open.

This is the last step in this lab.

Part 6 - Review

In this lab, you learned how to work with AngularJS expressions.

Related Webinars

Related Training

WA2425
AngularJS Training
AngularJS Programming
Ottawa
Instructor Led Virtual
Ottawa
Vancouver
Montreal
Instructor Led Virtual
WA2406
AngularJS Training
Introduction to Responsive Web Development with AngularJS and Bootstrap
Vancouver
Ottawa
Calgary
Vancouver
Montreal