One of the nicer JavaScript frameworks out there to work with must be AngularJS. Now there are quite a few other ones out there and I have used a number of them but AngularJS seems to be the most structured of them. And while it is really powerful it is also really easy to get started with.

AngularJS is a client side framework for creating rich web applications using JavaScript and HTML. It isn’t just a library like jQuery or Knockout.js where you create the structure and call into the library as you see fit. With a framework like AngularJS it is the other way round and it calls into your code. This means you have to like the way it is designed but fortunately AngularJS is pretty flexible so that is not a big penalty to pay. In fact it is more of a benefit as it helps structure your application in a good way.

The simplest AngularJS application

Below is pretty much the simplest AngularJS application you can make. Maybe not very functional yet but is shows a few of the very important parts.

So what does it get to display a “2” on the screen? Well first of all the “2” isn’t a literal but actually a result of adding 1 + 1 together on the client. So this is already a “somewhat” dynamic HTML/JavaScript application. The complete code listing is below.

1:<!DOCTYPEhtml>

2:<htmllang="en">

3:<head>

4:<title>AngularJS Demo</title>

5:<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>

6:</head>

7:<bodyng-app>

8: {{1 + 1}}

9:<scriptsrc="Scripts/angular.js"></script>

10:</body>

11:</html>

There are a few interesting things to note about this.

First of all there is the required script reference to angular.js. Either download this from the AngularJS site or use the NuGet package to add it to your Visual Studio 2012 project. No big new thing here.

Unlike with libraries like jQuery which we load using a similar script tag and then call the jQuery $() function whenever we want to things work a little different with AngularJS. In the case of a framework like AngularJS we let it do it’s work. With AngularJS we need to either do an automatic bootstrap or do so manually. The automatic process is by far the easiest and all we need to add for that is the ng-app attribute to some HTML element. In this case I added it to the <body> element so the whole page is an AngularJS application. If you prefer you can add it to a sub section of the page.

The last interesting part if the {{1 + 1}} part inside the body. The {{}} part is a data binding expression AngularJS will evaluate for us and display the result. In this case we are just adding two numbers but as we will see later we can do far more with this.

Making things interactive

The previous example is nice but I could just as well have hardcoded the value “2” in there. So lets make things a bit more interactive and have the user enter two numbers we can multiply.

The complete code needed for this is not much harder see below.

1:<!DOCTYPEhtml>

2:<htmllang="en">

3:<head>

4:<title>AngularJS Demo</title>

5:<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>

6:</head>

7:<bodyng-app>

8:<inputtype="text"ng-model="x"/>

9: *

10:<inputtype="text"ng-model="y"/>

11: = {{x * y}}

12:<scriptsrc="Scripts/angular.js"></script>

13:</body>

14:</html>

The new thing in this example is that we have two <input> controls with an ng-model attribute. These ng-model attributes are used for two way data binding input controls with data used by AngularJS. In the expression below {{x * y}} we multiply the two numbers added. And with this interactive calculator we still had to write no JavaScript, the closest we came to writing code is a single data binding expression in the HTML.